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
)
