Flutter核心技术与实战
陈航
美团点评高级技术专家
立即订阅
6150 人已学习
课程目录
已完结 47 讲
0/4登录后,你可以任选4讲全文学习。
课前必读 (3讲)
开篇词 | 为什么每一位大前端从业者都应该学习Flutter?
免费
01 | 预习篇 · 从0开始搭建Flutter工程环境
02 | 预习篇 · Dart语言概览
Flutter开发起步 (3讲)
03 | 深入理解跨平台方案的历史发展逻辑
04 | Flutter区别于其他方案的关键技术是什么?
05 | 从标准模板入手,体会Flutter代码是如何运行在原生系统上的
Dart语言基础 (3讲)
06 | 基础语法与类型变量:Dart是如何表示信息的?
07 | 函数、类与运算符:Dart是如何处理信息的?
08 | 综合案例:掌握Dart核心特性
Flutter基础 (13讲)
09 | Widget,构建Flutter界面的基石
10 | Widget中的State到底是什么?
11 | 提到生命周期,我们是在说什么?
12 | 经典控件(一):文本、图片和按钮在Flutter中怎么用?
13 | 经典控件(二):UITableView/ListView在Flutter中是什么?
14 | 经典布局:如何定义子控件在父容器中排版的位置?
15 | 组合与自绘,我该选用何种方式自定义Widget?
16 | 从夜间模式说起,如何定制不同风格的App主题?
17 | 依赖管理(一):图片、配置和字体在Flutter中怎么用?
18 | 依赖管理(二):第三方组件库在Flutter中要如何管理?
19 | 用户交互事件该如何响应?
20 | 关于跨组件传递数据,你只需要记住这三招
21 | 路由与导航,Flutter是这样实现页面切换的
Flutter进阶 (17讲)
22 | 如何构造炫酷的动画效果?
23 | 单线程模型怎么保证UI运行流畅?
24 | HTTP网络编程与JSON解析
25 | 本地存储与数据库的使用和优化
26 | 如何在Dart层兼容Android/iOS平台特定实现?(一)
27 | 如何在Dart层兼容Android/iOS平台特定实现?(二)
28 | 如何在原生应用中混编Flutter工程?
29 | 混合开发,该用何种方案管理导航栈?
30 | 为什么需要做状态管理,怎么做?
31 | 如何实现原生推送能力?
32 | 适配国际化,除了多语言我们还需要注意什么?
33 | 如何适配不同分辨率的手机屏幕?
34 | 如何理解Flutter的编译模式?
35 | Hot Reload是怎么做到的?
36 | 如何通过工具链优化开发调试效率?
37 | 如何检测并优化Flutter App的整体性能表现?
38 | 如何通过自动化测试提高交付质量?
Flutter综合应用 (6讲)
39 | 线上出现问题,该如何做好异常捕获与信息采集?
40 | 衡量Flutter App线上质量,我们需要关注这三个指标
41 | 组件化和平台化,该如何组织合理稳定的Flutter工程结构?
42 | 如何构建高效的Flutter App打包发布环境?
43 | 如何构建自己的Flutter混合开发框架(一)?
44 | 如何构建自己的Flutter混合开发框架(二)?
结束语 (1讲)
结束语 | 勿畏难,勿轻略
特别放送 (1讲)
特别放送 | 温故而知新,与你说说专栏的那些思考题
Flutter核心技术与实战
登录|注册

12 | 经典控件(一):文本、图片和按钮在Flutter中怎么用?

陈航 2019-07-25
你好,我是陈航。
在上一篇文章中,我与你介绍了 Widget 生命周期的实际承载者 State,并详细介绍了初始化、状态更新与控件销毁,这 3 个不同阶段所涉及的关键方法调用顺序。深入理解视图从加载到构建再到销毁的过程,可以帮助你理解如何根据视图的状态在合适的时机做恰当的事情。
前面几次分享我们讲了很多关于 Flutter 框架视图渲染的基础知识和原理。但有些同学可能会觉得这些基础知识和原理在实践中并不常用,所以在学习时会选择忽视这些内容。
但其实,像视图数据流转机制、底层渲染方案、视图更新策略等知识,都是构成一个 UI 框架的根本,看似枯燥,却往往具有最长久的生命力。新框架每年层出不穷,可是扒下那层炫酷的“外衣”,里面其实还是那些最基础的知识和原理。
因此,只有把这些最基础的知识弄明白了,修炼好了内功,才能触类旁通,由点及面形成自己的知识体系,也能够在框架之上思考应用层构建视图实现的合理性。
在对视图的基础知识有了整体印象后,我们再来学习 Flutter 视图系统所提供的 UI 控件,就会事半功倍了。而作为一个 UI 框架,与 Android、iOS 和 React 类似的,Flutter 自然也提供了很多 UI 控件。而文本、图片和按钮则是这些不同的 UI 框架中构建视图都要用到的三个最基本的控件。因此,在今天这篇文章中,我就与你一起学习在 Flutter 中该如何使用它们。
取消
完成
0/1000字
划线
笔记
复制
© 版权归极客邦科技所有,未经许可不得传播售卖。 页面已增加防盗追踪,如有侵权极客邦将依法追究其法律责任。
该试读文章来自付费专栏《Flutter核心技术与实战》,如需阅读全部文章,
请订阅文章所属专栏。
立即订阅
登录 后留言

精选留言(13)

  • 小米
    Button都是由RawMaterialButton承载视觉,Image都是RawImage,Text是RichText。它们都继承自RenderObjectWidget,而RenderObjectWidget的父类就是Widget。

    作者回复: 赞

    2019-07-25
    1
    15
  • 芊之 ( 欢
    老师,我想问下,不同手机的分辨率不同,对于同样是fontSize: 16的字号,显示的大小会不一样,这个问题一般会怎么处理。 问了下原生的开发,他们好像有库专门处理这类问题,而web中也有rem之类或其他的处理方式, flutter中我就不知道该怎么办了,求老师解答。

    作者回复: 有两种方案:
    1.根据屏幕宽度大小,把布局分为手机和平板两种实现,手机展示普通单页布局,平板可以展示双页布局。具体可以参考第33节
    2.以iPhone 6的尺寸为基准,定义缩放比例宽高系数,在布局的时候,可以考虑用上这两个系数去设置宽高

    2019-08-22
    4
  • 巫山老妖
    **Text**

    > 比如Android中的TextView,iOS中的UILabel

    Text参数分类:

    - **控制整体文本布局的参数**
    - textAlign
    - textDirection
    - maxLines
    - overflow
    - ...
    - **控制文本展示样式的参数**
    - fontFamily
    - fontSize
    - color
    - shadows

    通过TextSpan来对Text继续分片样式处理。

    **Image**

    > 比如Android中的ImageView,iOS里的UIImageView

    - 加载本地资源图片
    - 加载本地图片
    - 加载网络图片

    高级版本的Image
    - FadeInImage(支持占位图、加载动态等)
    - CacheNetworkImage(支持缓存到文件系统,更加强大的加载过程占位和加载错误占位)

    **按钮**

    - FloatingActionButton(圆形的按钮)
    - FlatButton(扁平化的按钮)
    - RaisedButton(凸起的按钮)

    两个最重要的参数:
    - onPressed(用于设置点击回调)
    - child(用于设置按钮的内容)

    作者回复: 赞👍

    2019-10-03
    2
  • 我想静静
    在用Text或者Icon控件显示竖直方向居中时总会有一点偏下,设置了各种属性都没有修正,最后还是给控件加了paddingBottom强行改变了内容区域的空间才正常,这是什么原因?

    作者回复: 一般来说跟文字排版中的baseline和decent有关系,你可以设置下面的属性把border都画出来看看问题出在哪儿
    import 'package:flutter/rendering.dart';

    main() {
      debugPaintLayerBordersEnabled=true;
      debugPaintBaselinesEnabled=true;
      runApp(MyApp());
    }

    2019-08-17
    2
  • 李耀
    flutter 打包之后就简单一个页面,apk包感觉比正常的大号好多

    作者回复: 因为需要带渲染引擎,Dart VM和一堆库呀

    2019-07-29
    2
  • 江宁彭于晏
    Text、Image、FadeInImage、FlatButton、RaisedBUTTON
    都由SingleChildRenderObjectWidget承载视觉
    并且这些Widget都隐式的定义了 Semantics ,因为他们可能都直接或者间接的在 Screen Reader 引擎中被使用

    作者回复: 赞

    2019-07-25
    2
  • 杨闯
    你好,我在使用控件的时候有一个疑问:对于一个字符串,我想在定宽的时候计算出它将会占据多大的高度,因为我们现在的项目是要根据高度进行特殊的处理,不知道您是否有什么解决办法

    作者回复: 可以用TextPainter来计算,具体使用方法可以参看auto_size_text这个库

    2019-07-25
    2
  • 烘哄轰、
    Image.asset(‘images/logo.png’);的路径需要在配置文件里配置,当时被这个问题坑了好久😂

    作者回复: 下周二会讲flutter中的资源管理

    2019-08-03
    1
  • sixgod
    老师有个问题 为什么container或者sizedbox有时候设置宽高不生效 在外面包裹一个align就生效了

    作者回复: 关于Container布局,可以参考这篇文章:https://limboy.me/tech/2019/01/11/flutter-layout.html

    2019-11-20
  • 微笑美男😄
    老师 怎么加载本地的图片。我设置好了之后 在pubspec.yaml中一直报警告,The asset images/fapiaoshenhe.png does not exist.
    Try creating the file or fixing the path to the file.
    但是感觉设置的没错啊。有专门讲的没

    作者回复: 检查一下你的声明方式,以及空格缩进

    2019-10-10
  • jlj
    老师请教个问题:
    fontSize要怎么设置, 才能让字体大小不随系统字体大小改变而改变.?

    作者回复: 试试Text的textScaleFactor属性

    2019-08-16
  • llons
    FadeInImage设置gif占位符,会一直触发addPersistentFrameCallback,但远程图片已经加载完毕,占位符已经不显示了

    作者回复: 你用的什么版本?1.5.4没问题

    2019-08-08
  • 🌻Arvin
    FlatButton(
        color: Colors.yellow, // 设置背景色为黄色
        shape:BeveledRectangleBorder(borderRadius: BorderRadius.circular(20.0)), // 设置斜角矩形边框
        colorBrightness: Brightness.light, // 确保文字按钮为深色
        onPressed: () => print('FlatButton pressed'),
        child: Row(children: <Widget>[Icon(Icons.add), Text("Add")],)
    );

    好像是版本更新了,背景色color细化成backgroundColor

    作者回复: 看了下FlatButton和MaterialButton的源码,没改动呀

    https://github.com/flutter/flutter/blob/master/packages/flutter/lib/src/material/material_button.dart

    https://github.com/flutter/flutter/blob/dev/packages/flutter/lib/src/material/flat_button.dart

    2019-08-06
收起评论
13
返回
顶部