Flutter 中有很多 UI 控件，而文本、图片和按钮是 Flutter 中最基本的控件，构建视图基本上都要使用到这三个基本控件
文本控件
文本是视图系统中的常见控件，用于显示一段特定样式的字符串，在 Flutter 中，文本展示是通过 Text 控件实现的
Text 支持的文本展示类型
- 单一样式的文本 Text
- 混合样式的富文本 Text.rich
单一样式的文本 Text
- 控制整体文本布局的参数：textAlign（文本对齐方式）、textDirection（文本排版方向）、maxLines（文本显示最大行数）、overflow（文本截断规则），等等。这些都是构造函数中的参数
- 控制文本展示样式的参数：fontFamily（字体名称）、fontSize（字体大小）、color（文本颜色）、shadows（文本阴影）、等等。这些都是构造函数中的参数 style 中的参数
混合样式的富文本 Text.rich
- 把一段字符串分为几个片段来管理，给每个片段单独设置样式，使用 TextSpan 来实现
图片
使用 Image 来加载不同形式、不同格式的图片
- 加载本地资源图片：Image.asset('images/logo.png');
- 加载本地（File 文件）图片：Image.file(File('/storage/test.png'));
- 加载网络图片：Image.network('http://xxx/logo.png');
支持高级功能的图片控件
- FadeInImage：提供了图片占位的功能，支持在图片加载完成时淡入淡出的视觉效果；ImageCache 使用 LRU（Least Recently User：最近最少使用）算法进行缓存更新策略，并且默认最多存储 1000 张图片，最大缓存限制为 100MB，当限定的空间已存满数据时，把最久没有被访问到的图片清除，图片只缓存在内存中
- CachedNetworkImage：不仅支持缓存图片到内存中，还支持缓存到文件系统中；加载过程占位与加载错误占位；自定义控件占位
按钮
通过按钮，可以响应用户的交互事件。Flutter 中提供了三个最基本的按钮控件：FloatingActionButton、FlatButton、RaisedButton
- FloatingActionButton：圆形按钮，一般出现在屏幕内容的前面
- FlatButton：扁平化的按钮，默认透明背景
- RaisedButton：凸起的按钮，默认带有灰色背景
按钮控件中的参数
- onPressed：设置点击回调，如果 onPressed 参数为空，则按钮处于禁用状态，不响应用户点击事件
- child：设置按钮的内容，可以接收任意的 Widget
以下为具体代码实现
void main() => runApp(MyBasiControl());/** * 经典控件 */class MyBasiControl extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: MyText(), ); }}String content = '欢迎关注\nAndroid小白营\n在这里我们可以一起成长\n';class MyText extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('Android小白营'), ), body: Column( mainAxisAlignment: MainAxisAlignment.start, children: <Widget>[ Text( '以下为不同样式的文本控件\n\n单一样式文本 Text\n一：默认样式\n' + content, ), Text( '二：自定义样式：居中显示，黑色背景，白色14号粗体字体\n' + content, textAlign: TextAlign.center, style: TextStyle( color: Colors.white, backgroundColor: Colors.black, fontSize: 14, fontWeight: FontWeight.bold, ), ), Text.rich(TextSpan(children: [ TextSpan( text: '\n富文本 Text.rich\n', style: TextStyle(color: Colors.red, fontSize: 20)), TextSpan(text: '欢迎关注\n'), TextSpan( text: 'Android小白营\n', style: TextStyle( color: Colors.blueAccent, fontWeight: FontWeight.bold, fontSize: 18)), TextSpan( text: '在这里我们可以一起成长', style: TextStyle( backgroundColor: Colors.deepOrangeAccent, color: Colors.cyanAccent, fontSize: 16)) ])), FlatButton( color: Colors.cyanAccent, shape: RoundedRectangleBorder( borderRadius: BorderRadius.circular(18.0)), onPressed: () { Fluttertoast.showToast(msg: '测试点击事件'); }, colorBrightness: Brightness.light, child: Row( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ Icon(Icons.add_circle_outline), Text('添加') ], )) ], )); }}运行后如下所示
本文由博客一文多发平台 OpenWrite 发布！