Flutter元件總結

可愛親寶寶發表於2021-08-17

1.佈局元件

1.1.Container

一個擁有繪製、定位、調整大小的 widget。

Container(  
    width: 300, //寬度
    height: 300, //高度  
    decoration: BoxDecoration(    
        borderRadius: BorderRadius.circular(5), //圓角    
        border: Border.all(width: 2.0, color: Colors.blueAccent //邊框
        ),    
        color: Colors.green,  //顏色
    ),  
    alignment: Alignment.center,  //對齊方式
    padding: EdgeInsets.all(10),  //內邊距    
    margin: EdgeInsets.all(10),   //外邊距    
    child: Text('測試'),    //子元件
);
複製程式碼

1.2.Row

在水平方向上排列子widget的列表。

Row(  
    mainAxisAlignment: MainAxisAlignment.spaceBetween, //主隊齊方式  
    crossAxisAlignment: CrossAxisAlignment.center, //豎對齊方式  
    children: [ //元件陣列    
        Text('測試1'),    
        Expanded( //擴充套件元件      
            child: Text(        
                '測試2',        
                textAlign: TextAlign.center,      
            ),      
            flex: 1, //剩下的都是我的    
        ),    
        Text('測試3'),  
    ],
),
複製程式碼

1.3.Column

在垂直方向上排列子widget的列表。

Column(  
    mainAxisAlignment: MainAxisAlignment.spaceEvenly, //主隊齊方式  
    crossAxisAlignment: CrossAxisAlignment.center, //橫對齊方式  
    children: [    //元件陣列    
        Text('測試1'),    
        Text('測試2'),    
        Text('測試3'),  
    ],
),
複製程式碼

1.4.Padding

一個widget, 會給其子widget新增指定的填充。

Card(  
    color: Colors.yellow,  
    child: Padding(    
        padding: EdgeInsets.all(10),    
        child: Text('測試'),  
    ),
);
複製程式碼

1.5.Center

將其子widget居中顯示在自身內部的widget。

Container(  
    width: 100,  
    height: 100,  
    color: Colors.yellow,  
    child: Center(    
        child: Text('測試'),  
    ),
);
複製程式碼

1.6.Align

一個widget，它可以將其子widget對齊，並可以根據子widget的大小自動調整大小。

Container(  
    width: 100,  
    height: 100,  
    color: Colors.yellow,  
    child: Align(    
        alignment: Alignment(0, 0), //範圍-1~1，0為中間
        child: Text('測試'),  
    ),
);
複製程式碼

1.7.AspectRatio

一個widget，試圖將子widget的大小指定為某個特定的長寬比。自身的比例。

Container(  
    alignment: Alignment.center,  
    height: 200,  
    color: Colors.blueAccent,  
    child: AspectRatio(    
        aspectRatio: 3,   //是自身的寬高比3：1 
            child: Container(      
                color: Colors.yellow,    
            ),  
        ),
    );
複製程式碼

1.8.SizeBox

一個特定大小的盒子。

SizedBox(  
    width: 100,  
    height: 100,  
    child: Center(    
        child: Text("測試"),  
    ),
);
複製程式碼

1.9.Stack

可以允許其子widget簡單的堆疊在一起。

Stack(  children: [    
    Container(      
        width: 200,      
        height: 200,      
        color: Colors.pinkAccent,    
    ),    
    Container(      
        width: 100,      
        height: 100,      
        color: Colors.blueAccent,    
    ),  
],);
複製程式碼

2.基礎元件

2.1.Image

一個顯示圖片的widget。

Column(  
    children: [    
        Image(      
            image: NetworkImage("網路圖片"),      
            width: 100,      
            fit: BoxFit.fitWidth, //縮放模式    
        ),    
        ClipOval(   //圓角圖片      
            child:  Image.asset(        
                '本地圖片',        
                width: 100,        
                height: 100,        
                fit: BoxFit.contain,      
            ),    
        )  
    ],
),
複製程式碼

2.2.Text

單一格式的文字。

Text(  
    '測試',  
    textAlign: TextAlign.center,  //內容對齊方式
    overflow: TextOverflow.ellipsis,  //超出...
    style: TextStyle(   //字型型別  
        fontSize: 16,    
        fontWeight: FontWeight.bold,    
        fontFamily: '黑體',    
        color: Colors.blueAccent,  
    ),
),
Text.rich(TextSpan( //富文字    
    text: '測試',    
    style: TextStyle(fontWeight: FontWeight.bold),    
    children: <TextSpan>[      
        TextSpan(text: '富文字', style: TextStyle(fontSize: 16))    
    ]
)),
複製程式碼

2.3.Icon

系統設計的圖示。

Icon(    
    Icons.favorite, //圖示    
    color: Colors.pink, //圖示顏色    
    size: 24, //圖示大小  
),  
IconButton(    //圖示按鈕
    onPressed: () {      
        print('點選圖示');    
    },    
    icon: Icon(Icons.add),  
),
複製程式碼

2.4.Button

帶有不同屬性的按鈕。

ElevatedButton(  onPressed: () {},
    child: Text("elevateButton"),  
    style: ButtonStyle(    
    textStyle: MaterialStateProperty.all(TextStyle(fontSize: 20)), //字型大小    
    foregroundColor: MaterialStateProperty.all(Colors.white), //字型顏色    
    backgroundColor: MaterialStateProperty.all(Colors.red), //背景顏色    
    padding: MaterialStateProperty.all(EdgeInsets.all(20)), //內邊距    
    shape: MaterialStateProperty.all(RoundedRectangleBorder(        //形狀圓角        
        borderRadius: BorderRadius.circular(20))),    
    side: MaterialStateProperty.all(BorderSide(color: Colors.purple, width: 1)), //邊框大小顏色    
    minimumSize: MaterialStateProperty.all(Size(200, 200)), //按鈕大小  
),
複製程式碼

2.5.Scaffold

Material Design佈局結構的基本實現。此類提供了用於顯示drawer、snackbar和底部sheet的API。

Scaffold(  
    appBar: AppBar( //導航欄    
    title: Text("Flutter Demo"),  ),  
    body: Test(), //內容  
    backgroundColor: Colors.grey[100], //背景顏色  
    bottomNavigationBar: BottomNavigationBar( //底部欄    
        onTap: (index) {      
            print('點選的是第$index個');    
        },    
        currentIndex: 0,    
        items: [
            BottomNavigationBarItem(icon: Icon(Icons.home), label: 'Home'),      
            BottomNavigationBarItem(icon: Icon(Icons.school), label: 'School'),    
        ],  
    ),
);
複製程式碼

2.6.AppBar

一個Material Design應用程式欄，由工具欄和其他可能的widget（如TabBar和FlexibleSpaceBar）組成。

AppBar(  //導航欄  
    title: Text("Flutter Demo"),  
    actions: [    
        Icon(Icons.add),    
        PopupMenuButton(  //彈出選單      
            itemBuilder: (BuildContext context) {       
                 return [          
                    PopupMenuItem(child: Text('測試1'), value: '1號'),          
                    PopupMenuItem(child: Text('測試2'), value: '2號'),          
                    PopupMenuItem(child: Text('測試3'), value: '3號'),        
                ];      
            },      
            onSelected: (object) {        
                print(object);      
            },    
        ),  
    ],  
    backgroundColor: Colors.red,  
    foregroundColor: Colors.white,
),
複製程式碼

2.7.BottomNavigationBar

底部導航條，可以很容易地在tap之間切換和瀏覽頂級檢視。

BottomNavigationBar(  //底部欄  
    onTap: (index) {    print('點選的是第$index個');  },  
    currentIndex: 0,  
    backgroundColor: Colors.pink, 
    selectedItemColor: Colors.yellow,
    unselectedItemColor: Colors.white,
    items: [    
        BottomNavigationBarItem(icon: Icon(Icons.home), label: 'Home'),    
        BottomNavigationBarItem(icon: Icon(Icons.school), label: 'School'),  
    ],
),
複製程式碼

2.8.TabBar

一個顯示水平選項卡的Material Design widget。

_tabController = TabController(length: 3, vsync: this);

TabBar(  
    tabs: [    
        Tab(icon: Icon(Icons.home)),    
        Tab(icon: Icon(Icons.send)),    
        Tab(icon: Icon(Icons.title)),  
    ],  
    controller: _tabController,
),
複製程式碼

2.9.TabBarView

顯示與當前選中的選項卡相對應的頁面檢視。通常和TabBar一起使用。

_tabController = TabController(length: 3, vsync: this);

TabBarView(  
    children: [    
        Text('ceshi1'),    
        Text('ceshi2'),    
        Text('ceshi3'),  
    ],  
    controller: _tabController,
),
複製程式碼

2.10.MateralApp

一個方便的widget，它封裝了應用程式實現Material Design所需要的一些widget。

MaterialApp(  
    debugShowCheckedModeBanner: false, //是否顯示測試  
    home: Home(), //主頁  
    theme: ThemeData(primaryColor: Colors.yellow), //主題設定  
    routes: {    //路由集合    
        "/about": (context) => Test(),  
    },
);
複製程式碼

2.11.Drawer

從Scaffold邊緣水平滑動以顯示應用程式中導航連結的Material Design皮膚。

Scaffold(
    drawer: Drawer(  //左滑抽屜
        child: ListView(    
            children: [      
                DrawerHeader(child: Text('Drawer Header')),    
            ],  
        ),
    ),
);
複製程式碼

2.12.TextField

文字輸入框。

TextField(  
    decoration: InputDecoration(    
        border: InputBorder.none, // 邊框設定    
        hintText: 'password',  ),  
    keyboardType: TextInputType.number, //鍵盤型別  
    textInputAction: TextInputAction.search, //鍵盤右下角按鈕  
    autofocus: true, //自動聚焦  
    obscureText: true,//隱藏輸入內容，如password  
    maxLength: 10, ///最大長度  
    onChanged: (text) { //輸入變化    print(text);  },  
    onSubmitted: (val) { //提交內容    print(val);  },  
    enabled: true, //是否可點選  
    controller: TextEditingController(), //放在外面定義，用於監聽
)
複製程式碼

2.13.ListView

可滾動的列表控制元件。ListView是最常用的滾動widget，它在滾動方向上一個接一個地顯示它的子元件。在縱軸上，子元件被要求填充ListView。

ListView(  
    padding: EdgeInsets.all(20),  
    children: [    
        Container(      
            alignment: Alignment.center,      
            height: 100,      
            color: Colors.green,      
            child: Text('測試'),    
        ),    
        Container(      
            alignment: Alignment.center,      
            height: 100,      
            color: Colors.blueAccent,      
            child: Text('測試'),    
        ),    
        Container(      
            alignment: Alignment.center,      
            height: 100,      
            color: Colors.yellow,      
            child: Text('測試'),    
        ),  
    ],
);

class _TestState extends State<Test> {  
    final List<String> _text = ['測試', '開發', '釋出'];  
    @override  Widget build(BuildContext context) {    
        return ListView.builder(      
            itemCount: _text.length,      
            itemBuilder: (BuildContext context, int index) {        
                return Container(          
                    alignment: Alignment.center,          
                    height: 100,          
                    color: Colors.yellow,          
                    child: Text(_text[index]),        
                );      
            },    )
        ;  
    }
}
複製程式碼

2.14.ListTile

一個固定高度的行，通常包含一些文字，以及一個行前或行尾圖示。

ListView(  
    children: [    
        ListTile(      
            leading: FlutterLogo(size: 40), //左邊圖示     
            title: Text('title'),      //標題
            subtitle: Text('subtitle'),     //副標題 
            trailing: Icon(Icons.favorite), //右邊圖示   
        ),    
        ListTile(      
            leading: FlutterLogo(size: 40),      
            title: Text('title'),      
            subtitle: Text('subtitle'),      
            trailing: Icon(Icons.favorite),    
        ),  
    ],
);
複製程式碼

2.15.Divider

一個邏輯1畫素厚的水平分割線，兩邊都有填充。

ListView(  
    children: [    
        ListTile(      
            title: Text('title'),      
            subtitle: Text('subtitle'),    
        ),    
        Divider(      //分割線
            height: 20, //分割線高度      
            thickness: 5, //厚度高度      
            indent: 20, //前縮排      
            endIndent: 20, //後縮排      
            color: Colors.blueAccent, //顏色    
        ),    
        ListTile(      
            title: Text('title'),      
            subtitle: Text('subtitle'),    
        ),  
    ],
);
複製程式碼

後續待補充。。。

Flutter 元件總結
2019-02-24
Flutter元件
Flutter 裁剪類元件最全總結
2020-03-12
Flutter元件
Flutter新手入門常用元件總結，讓你瞭解更多的Flutter元件？
2021-04-06
Flutter元件
Flutter Form表單控制元件超全總結
2020-03-14
FlutterORM控制元件
Flutter 總結
2021-07-30
Flutter
Flutter Redux 食用總結
2019-03-04
FlutterRedux
Flutter填坑全面總結
2019-03-04
Flutter
Flutter七日總結
2018-12-23
Flutter
元件庫搭建總結
2021-04-14
元件
【Flutter元件終結篇】332個元件 658頁PDF
2020-06-02
Flutter元件
Flutter Widget自定義總結
2019-04-04
Flutter
安裝flutter和dart總結
2019-04-02
FlutterDart
Flutter 介紹 & 經驗總結
2019-08-23
Flutter
flutter安裝問題總結
2018-03-11
Flutter
Vue 子元件呼叫父元件方法總結
2018-12-14
Vue元件
React高階元件總結
2018-09-16
React元件
IOS元件化方案總結
2018-12-26
iOS元件化
Flutter 佈局控制元件完結篇
2018-09-26
Flutter控制元件
Flutter元件
2024-03-03
Flutter元件
Flutter學習總結系列----Flutter基礎全面詳解
2018-07-04
Flutter
2019 Joyy Flutter 總結
2020-01-20
Flutter
⚠️Flutter 效能優化實踐總結⚠️
2019-12-20
Flutter優化
Flutter狀態管理 - 初探與總結
2019-05-13
Flutter
Flutter實際開發bug總結
2019-08-27
Flutter
深入理解flutter的程式碼結構：元件
2024-06-05
Flutter元件
React 元件模式學習總結
2019-03-21
React元件模式
WPF控制元件庫總結
2020-11-20
控制元件
Flutter元件Image
2021-04-06
Flutter元件
Flutter 知識點總結-基礎篇
2021-07-29
Flutter
Vue父子元件通訊小總結
2018-09-10
Vue元件
vue總結「三」--元件生命週期
2020-10-24
Vue元件
Vue 自定義元件directive使用總結
2020-10-02
Vue元件
Android Flutter混合開發問題總結
2019-09-23
AndroidFlutter
Flutter 中的非同步程式設計總結
2019-09-12
Flutter非同步程式設計
flutter 編譯報錯總結（不斷更新）
2019-09-04
Flutter編譯
Flutter元件學習（一）—— Text元件
2018-11-26
Flutter元件
Flutter元件大全(一)
2020-05-24
Flutter元件
Flutter元件大全(四)
2020-06-01
Flutter元件