文章目录
一、CloseButton 关闭按钮组件
二、BackButton 回退按钮组件
三、Chip 组件
四、 相关资源
一、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(), ], ), ), ), ); } }
运行效果 :
