Flutter 核心技术与实战
陈航
前美团点评高级技术专家
42432 人已学习
新⼈⾸单¥59
登录后,你可以任选4讲全文学习
课程目录
已完结/共 48 讲
Flutter 核心技术与实战
15
15
1.0x
00:00/00:00
登录|注册

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

样式定制
child参数
onPressed参数
缓存更新策略
图片缓存
异步加载图片数据
淡入淡出效果
图片占位
重复模式repeat
拉伸模式centerSlice
填充模式fit
加载网络图片
加载本地文件图片
加载本地资源图片
混合展示样式
控制文本展示样式的参数
控制整体文本布局的参数
初始化
RaisedButton
FlatButton
FloatingActionButton
ImageProvider
FadeInImage
Image
富文本Text.rich
单一样式文本Text
RaisedButton
FlatButton
FloatingActionButton
ImageProvider
FadeInImage
Image
富文本Text.rich
单一样式文本Text
思考题
按钮控件
图片控件
文本控件
按钮控件
图片控件
文本控件
总结
经典控件

该思维导图由 AI 生成,仅供参考

你好,我是陈航。
在上一篇文章中,我与你介绍了 Widget 生命周期的实际承载者 State,并详细介绍了初始化、状态更新与控件销毁,这 3 个不同阶段所涉及的关键方法调用顺序。深入理解视图从加载到构建再到销毁的过程,可以帮助你理解如何根据视图的状态在合适的时机做恰当的事情。
前面几次分享我们讲了很多关于 Flutter 框架视图渲染的基础知识和原理。但有些同学可能会觉得这些基础知识和原理在实践中并不常用,所以在学习时会选择忽视这些内容。
但其实,像视图数据流转机制、底层渲染方案、视图更新策略等知识,都是构成一个 UI 框架的根本,看似枯燥,却往往具有最长久的生命力。新框架每年层出不穷,可是扒下那层炫酷的“外衣”,里面其实还是那些最基础的知识和原理。
因此,只有把这些最基础的知识弄明白了,修炼好了内功,才能触类旁通,由点及面形成自己的知识体系,也能够在框架之上思考应用层构建视图实现的合理性。
在对视图的基础知识有了整体印象后,我们再来学习 Flutter 视图系统所提供的 UI 控件,就会事半功倍了。而作为一个 UI 框架,与 Android、iOS 和 React 类似的,Flutter 自然也提供了很多 UI 控件。而文本、图片和按钮则是这些不同的 UI 框架中构建视图都要用到的三个最基本的控件。因此,在今天这篇文章中,我就与你一起学习在 Flutter 中该如何使用它们。
确认放弃笔记?
放弃后所记笔记将不保留。
新功能上线,你的历史笔记已初始化为私密笔记,是否一键批量公开?
批量公开的笔记不会为你同步至部落
公开
同步至部落
取消
完成
0/2000
荧光笔
直线
曲线
笔记
复制
AI
  • 深入了解
  • 翻译
    • 英语
    • 中文简体
    • 中文繁体
    • 法语
    • 德语
    • 日语
    • 韩语
    • 俄语
    • 西班牙语
    • 阿拉伯语
  • 解释
  • 总结

Flutter中的经典控件包括文本、图片和按钮。文本控件通过Text和Text.rich实现单一样式和混合样式的文本展示。图片控件支持加载本地资源图片、网络图片和文件图片,并提供了填充模式和占位图功能。按钮控件则是Flutter中的交互元素,可以通过RaisedButton、FlatButton等实现。本文详细介绍了这些控件的使用方法和特点,以及图片加载流程和缓存策略。通过本文的总结,读者可以快速了解Flutter中文本、图片和按钮控件的基本用法和特性,为进一步学习和应用提供了基础知识。 在按钮方面,Flutter提供了三个基本的按钮控件,即FloatingActionButton、FlatButton和RaisedButton。这些按钮控件的使用方法类似,但默认样式不同。除了控制基本样式,按钮还需要响应用户点击行为,对应着按钮控件中的两个最重要的参数:onPressed和child。按钮控件也提供了丰富的样式定制功能,比如背景颜色、按钮形状、主题颜色等。 总结来看,Flutter的经典控件与原生Android、iOS系统提供的控件在UI基本信息的表达上没有本质区别,但在自定义控件样式上,Flutter的这些经典控件提供了强大而简洁的扩展能力,使得开发者可以快速开发出功能复杂、样式丰富的页面。 通过本文的学习,读者可以快速了解Flutter中文本、图片和按钮控件的基本用法和特性,以及掌握按钮控件的样式定制方法。文章还留下了思考题,鼓励读者深入阅读Flutter SDK中相关控件的源码,以加深对控件内部实现的理解。 总之,本文为读者提供了对Flutter中经典控件的全面介绍和深入理解的机会,为进一步学习和应用Flutter提供了基础知识和思考的方向。

仅可试看部分内容,如需阅读全部内容,请付费购买文章所属专栏
《Flutter 核心技术与实战》
新⼈⾸单¥59
立即购买
登录 后留言

全部留言(24)

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

    作者回复: 赞

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

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

    2019-08-22
    17
  • 巫山老妖
    **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
    10
  • 杨闯
    你好,我在使用控件的时候有一个疑问:对于一个字符串,我想在定宽的时候计算出它将会占据多大的高度,因为我们现在的项目是要根据高度进行特殊的处理,不知道您是否有什么解决办法

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

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

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

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

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

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

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

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

    作者回复: 赞

    2019-07-25
    2
  • 🌻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
    1
  • sixgod
    老师有个问题 为什么container或者sizedbox有时候设置宽高不生效 在外面包裹一个align就生效了

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

    2019-11-20
收起评论
显示
设置
留言
24
收藏
沉浸
阅读
分享
手机端
快捷键
回顶部