三、Chip 组件
Chip 组件比较复杂 , 可设置的配置较多 , 可参考其源码逐个研究每个字段的含义 ;
Chip 组件源码 : 下面是 Chip 组件构造函数源码 ;
class Chip extends StatelessWidget implements ChipAttributes,
DeletableChipAttributes { /// Creates a material design chip. /// /// The [label], [autofocus], and [clipBehavior] arguments must not be null. /// The [elevation] must be null or non-negative. const Chip({ Key key, this.avatar, // 图标 @required this.label, // 文本内容 this.labelStyle, this.labelPadding, this.deleteIcon, this.onDeleted, this.deleteIconColor, this.deleteButtonTooltipMessage, this.shape, this.clipBehavior = Clip.none, this.focusNode, this.autofocus = false, this.backgroundColor, this.padding, this.materialTapTargetSize, this.elevation, this.shadowColor, }) : assert(label != null), assert(autofocus != null), assert(clipBehavior != null), assert(elevation == null || elevation >= 0.0), super(key: key);
代码示例 :
// Chip 组件 Chip( // Chip 组件的图标 avatar: Icon(Icons.access_alarm, color: Colors.blue,), label: Text('闹钟', style: textStyle,), ),
完整代码示例 :
import 'package:flutter/material.dart'; class StatelessWidgetPage extends StatelessWidget { // This widget is the root of your application. @override Widget build(BuildContext context) { // 文本组件样式 , 可以设置给 Text 文本组件 // 设置字体大小 20, 颜色红色 TextStyle textStyle = TextStyle(fontSize: 20, color: Colors.red); return MaterialApp( title: 'StatelessWidget 组件示例', theme: ThemeData( primarySwatch: Colors.blue, ), home: Scaffold( appBar: AppBar(title: Text('StatelessWidget 组件示例'),), // Container 容器使用 body: Container( // 设置容器的装饰器 , BoxDecoration 是最常用的装饰器 // 可以自行查看 BoxDecoration 中可以设置的属性 decoration: BoxDecoration(color: Colors.grey), // 设置 child 子组件居中方式, 居中放置 alignment: Alignment.center, // 子组件, 子组件设置为一个 Column 组件 child: Column( // Column 子组件, 这里设置 Text 文本组件 children: <Widget>[ // Text 文本组件 // textStyle 是之前创建的 TextStyle textStyle 对象 Text('Container 中的 Text 文本组件示例', style: textStyle,), // Icon 图标组件 Icon(Icons.map, size: 100, color: Colors.green,), // 关闭按钮 CloseButton(), // 返回按钮 BackButton(), // Chip 组件 Chip( // Chip 组件的图标 avatar: Icon(Icons.access_alarm, color: Colors.blue,), label: Text('闹钟', style: textStyle,), ), ], ), ), ), ); } }
运行效果展示 :
四、 相关资源
参考资料 :
Flutter 官网 : https://flutter.dev/
Flutter 开发文档 : https://flutter.cn/docs ( 强烈推荐 )
官方 GitHub 地址 : https://github.com/flutter
Flutter 中文社区 : https://flutter.cn/
Flutter 实用教程 : https://flutter.cn/docs/cookbook
Flutter CodeLab : https://codelabs.flutter-io.cn/
Dart 中文文档 : https://dart.cn/
Dart 开发者官网 : https://api.dart.dev/
Flutter 中文网 ( 非官方 , 翻译的很好 ) : https://flutterchina.club/ , http://flutter.axuer.com/docs/
Flutter 相关问题 : https://flutterchina.club/faq/ ( 入门阶段推荐看一遍 )
博客源码下载 :
GitHub 地址 : https://github.com/han1202012/flutter_cmd ( 随博客进度一直更新 , 有可能没有本博客的源码 )
博客源码快照 : https://download.csdn.net/download/han1202012/15484718 ( 本篇博客的源码快照 , 可以找到本博客的源码 )