Flutter常用组件实践
- 1、MaterialApp 和 Center（组件居中)
- 2、Scaffold
- 3、Container（容器）
- 4、BoxDecoration（装饰器）
- 5、Column（纵向布局）及Icon（图标）
- 6、Column/Row（横向/横向布局）+CloseButton/BackButton/IconButton（简单按钮）
- 7、Expanded和Flexible
- 8、Stack和Positioned（层叠布局）
- 9、页面底部切换BottomNavigationBar
- 10、RefreshIndicator和ListView（下拉刷新）
- 11、FloatingActionButton(悬浮按钮)
- 12、Text（文本）
- 13、TextField（功能较多）
- 14、PageView（滑动视图）
- 15、Image（加载图片）
- 16、Chip（有趣的小组件）和 Divider（分隔符）
- 17、Card（卡片式布局）
- 18、AlertDialog（弹出框）
- 19、LinearGradient（颜色渐变）
- 20、RichText（富文本）
- 21、GestureDetector(手势监控）
- 22、Opacity（透明度）
- 23、MediaQuery.removePadding(去除组件之间空格）
- 24、Slider（滑动进度条）
- 25、ReorderableListView（拖拽排序组件）
1、MaterialApp 和 Center（组件居中)
class MyApp extends StatelessWidget {
const MyApp({
super.key});
// This widget is the root of your application.
Widget build(BuildContext context) {
return MaterialApp(
title: '我的应用',
theme: ThemeData(
colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
useMaterial3: true,
),
home: Center(
child: Text("测试文本")
),
);
}
}
2、Scaffold
Scaffold 实现了基本的 MaterialApp 布局。只要是在 Material 中定义了的单个界面显示的布局控件元素，都可以使用 Scaffold 来绘制。
class MyApp extends StatelessWidget {
const MyApp({
super.key});
// This widget is the root of your application.
Widget build(BuildContext context) {
return MaterialApp(
title: '我的应用',
theme: ThemeData(
colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
useMaterial3: true,
),
home: Scaffold(
appBar: AppBar(
title: Text('我是页面标题'),
centerTitle: true,
elevation: 0,
bottom: null,
backgroundColor: Colors.orangeAccent,
bottomOpacity: 0,
),
//头部导航条区域
body: Center(
child: Text('我是主体内容'),
),
//页面主题内容区域
floatingActionButton: FloatingActionButton(
onPressed: () {
},
child: Icon(Icons.add),
),
//右下角浮动按钮区域
drawer: Drawer(),
//侧边栏抽屉区域
bottomNavigationBar: BottomNavigationBar(
items: [
BottomNavigationBarItem(
icon: Icon(
Icons.home,
color: Colors.grey,
),
activeIcon: Icon(
Icons.home,
color: Colors.blue,
),
label: '首页',
),
BottomNavigationBarItem(
icon: Icon(
Icons.list,
color: Colors.grey,
),
activeIcon: Icon(
Icons.list,
color: Colors.blue,
),
label: "列表",
)
],
),
) //底部tabBar区域,
);
}
}
3、Container（容器）
将Container容器放在上面的Scaffold对象的body部分，则到如下
Container(
width: 200, //宽度
height: 200, //长度
child: Text("我是body部分的内容"), //子组件
decoration: BoxDecoration(
color: Colors.blue,
), //装饰器
padding: EdgeInsets.all(10),
//内容距离盒子边界的距离
margin: EdgeInsets.all(10) //盒子边界之外的距离
)
4、BoxDecoration（装饰器）
Center(
child: Container(
width: 270,
height: 470,
decoration: BoxDecoration(
color: Colors.blue, //颜色背景
image: DecorationImage(
image: NetworkImage("https://inews.gtimg.com/om_bt/O_DyA7LF3uL3wZ9zYVo8ZhI_IMUOn_NJ_Pgj2IhAuRApoAA/641"), //背景图片
fit: BoxFit.cover, //图片充满组件
),
border: Border.all(
color: Colors.red,
width: 5.0,
)
), //设置边框
),
)
5、Column（纵向布局）及Icon（图标）
Column(
children: <Widget>[
Expanded(child: Text('主体内容1'), flex: 3,),
Expanded(child: Text('主体内容2'), flex
