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
