12 | 经典控件（一）：文本、图片和按钮在Flutter中怎么用？
该思维导图由 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-25335
欢老师，我想问下，不同手机的分辨率不同，对于同样是fontSize: 16的字号，显示的大小会不一样，这个问题一般会怎么处理。 问了下原生的开发，他们好像有库专门处理这类问题，而web中也有rem之类或其他的处理方式， flutter中我就不知道该怎么办了，求老师解答。作者回复: 有两种方案： 1.根据屏幕宽度大小，把布局分为手机和平板两种实现，手机展示普通单页布局，平板可以展示双页布局。具体可以参考第33节 2.以iPhone 6的尺寸为基准，定义缩放比例宽高系数，在布局的时候，可以考虑用上这两个系数去设置宽高
2019-08-2217
巫山老妖
**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-0310
杨闯你好，我在使用控件的时候有一个疑问：对于一个字符串，我想在定宽的时候计算出它将会占据多大的高度，因为我们现在的项目是要根据高度进行特殊的处理，不知道您是否有什么解决办法作者回复: 可以用TextPainter来计算，具体使用方法可以参看auto_size_text这个库
2019-07-257
我想静静在用Text或者Icon控件显示竖直方向居中时总会有一点偏下，设置了各种属性都没有修正，最后还是给控件加了paddingBottom强行改变了内容区域的空间才正常，这是什么原因？作者回复: 一般来说跟文字排版中的baseline和decent有关系，你可以设置下面的属性把border都画出来看看问题出在哪儿 import 'package:flutter/rendering.dart'; main() { debugPaintLayerBordersEnabled=true; debugPaintBaselinesEnabled=true; runApp(MyApp()); }
2019-08-176
李耀flutter 打包之后就简单一个页面，apk包感觉比正常的大号好多作者回复: 因为需要带渲染引擎，Dart VM和一堆库呀
2019-07-294
烘哄轰、Image.asset(‘images/logo.png’)；的路径需要在配置文件里配置，当时被这个问题坑了好久😂作者回复: 下周二会讲flutter中的资源管理
2019-08-032- 江宁彭于晏Text、Image、FadeInImage、FlatButton、RaisedBUTTON 都由SingleChildRenderObjectWidget承载视觉 并且这些Widget都隐式的定义了 Semantics ，因为他们可能都直接或者间接的在 Screen Reader 引擎中被使用
作者回复: 赞
2019-07-252 
🌻ArvinFlatButton( 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-061
sixgod老师有个问题 为什么container或者sizedbox有时候设置宽高不生效 在外面包裹一个align就生效了作者回复: 关于Container布局，可以参考这篇文章：https://limboy.me/tech/2019/01/11/flutter-layout.html
2019-11-20