文章目录
一、CloseButton 关闭按钮组件
通常用于作为关闭界面的按钮 , 直接使用构造函数创建即可 , 参数一般为空 ;
代码示例 :
// 关闭按钮
CloseButton(),
完整代码示例 :
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 回退按钮组件
BackButton 组件通常作为界面回退按钮组件 , 直接使用构造函数创建 , 参数一般为空 ;
代码示例 :
// 返回按钮
BackButton(),
完整代码示例 :
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 组件源码 : 下面是 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 ( 随博客进度一直更新 , 有可能没有本博客的源码 )
-
