Flutter 開發(fā)之組件一

Flutter 的口號：一切諧為組件。同其他平臺一樣，F(xiàn)lutter 提供了一系列的組件，有基礎(chǔ)組件（Basics Widgets），質(zhì)感組件（Material Components）、Cupertino 等。

Flutter 中基礎(chǔ)組件的介紹，用法也比較簡單。每個(gè)組件都是一個(gè)以類的形式存在。Flutter 的組件屬性也很多，我們不可能記得每一項(xiàng)，只有經(jīng)常使用或者了解一些關(guān)鍵屬性，然后用到時(shí)再去查看具體屬性。正所謂“流水的屬性，鐵打的組件”。

• Flutter的UI控件的使用方法
• Flutter Widget 索引

本篇主要介紹以下幾個(gè)組件：

• Align-Align – 對齊組件
• Bar – 組件
• Box – 組件
• Button – 組件

一、Align-Align – 對齊組件

一個(gè) widget，它可以將其子 widget 對齊，并可以根據(jù)子 widget 的大小自動調(diào)整大小。

import 'package:flutter/material.dart';

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Align組件',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Align組件'),
        ),
        body:Container(
//          width: 200.0,
//          height: 200.0,
          color: Colors.red,
          child: Align(
            //對齊方式
            //alignment: Alignment.bottomLeft,
            //對齊方式使用x,y來表示 范圍是-1.0 - 1.0
            alignment: Alignment(-0.5,-1.0),
            //寬高填充的系數(shù)
            widthFactor: 3.0,
            heightFactor: 3.0,
            child: Container(
              color: Colors.green,
              width: 100.0,
              height: 50.0,
              child: Text('align',style: TextStyle(color: Colors.white),),
            ),
          ),
        ),
      ),
    );
  }
}

二、Bar – 組件

2.1 AppBar 組件

狀態(tài)欄上的右側(cè)或左側(cè)按鈕，一個(gè) Material Design 應(yīng)用程序欄，由工具欄和其他可能的 widget（如 TabBar 和 FlexibleSpaceBar）組成。

import 'package:flutter/material.dart';

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'AppBar組件',
      home: Scaffold(
        appBar: AppBar(
          title: Text('標(biāo)題'),
          //左側(cè)圖標(biāo)
          leading: Icon(Icons.home),
          //背景色
          backgroundColor: Colors.green,
          //居中標(biāo)題
          centerTitle: true,
          actions: <Widget>[
            IconButton(
              icon: Icon(Icons.print),
              tooltip: '打印',
              onPressed: (){},
            ),
            //菜單按鈕
            PopupMenuButton<String>(
              itemBuilder: (BuildContext context) => <PopupMenuItem<String>>[
                //菜單項(xiàng)
                PopupMenuItem<String>(
                  value: 'friend',
                  child: Text('分享到朋友圈'),
                ),
                PopupMenuItem<String>(
                  value: 'download',
                  child: Text('下載到本地'),
                ),
              ],
            ),
          ],
        ),
        body: Container(),
      ),
    );
  }
}

2.2 bottomNavigationBar

底部導(dǎo)航條，可以很容易地在 tap 之間切換和瀏覽頂級視圖。

    return BottomNavigationBar(
      //底部按鈕類型 固定樣式
      type: BottomNavigationBarType.fixed,
      //按鈕大小
      iconSize: 24.0,
      //點(diǎn)擊里面的按鈕回調(diào)的函數(shù)
      onTap: _onItemTapped,
      //當(dāng)前選中項(xiàng)索引 高亮顯示
      currentIndex: _currentIndex,
      //當(dāng)類型為fixed時(shí),選中項(xiàng)的顏色
      fixedColor: Colors.red,
      items: <BottomNavigationBarItem>[
        BottomNavigationBarItem(title: Text('聊天'),icon: Icon(Icons.chat)),
        BottomNavigationBarItem(title: Text('朋友圈'),icon: Icon(Icons.refresh)),
        BottomNavigationBarItem(title: Text('我的'),icon: Icon(Icons.person)),
      ],
    );

2.3 ButtonBar

未端對齊按鈕容器?ButtonBar

      child: ButtonBar(
        //對齊方式 默認(rèn)為末端end
        alignment: MainAxisAlignment.spaceAround,
      ),

2.4 FlexibleSpaceBar

可折疊的應(yīng)用欄?FlexibleSpaceBar

        body: NestedScrollView(
            headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled){
              return <Widget>[
                SliverAppBar(
                  //展開高度
                  expandedHeight: 150.0,
                  //是否隨著滑動隱藏標(biāo)題
                  floating: false,
                  //是否固定在頂部
                  pinned: true,
                  //可折疊的應(yīng)用欄
                  flexibleSpace: FlexibleSpaceBar(
                    centerTitle: true,
                    title: Text(
                      '可折疊的組件',
                      style: TextStyle(
                        color: Colors.white,
                        fontSize: 16.0,
                      ),
                    ),
                  ),
                ),
              ];
            },
            body: Center(
              child: Text('向上提拉，查看效果'),
            )
        ),
      ),
    );

2.5 SliverAppBar

Sliver應(yīng)用欄?SliverAppBar

 body: NestedScrollView(
            headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled){
              return <Widget>[
                SliverAppBar(
                  //是否預(yù)留高度
                  primary:true,
                  //標(biāo)題前面顯示的一個(gè)控件
                  leading: Icon(Icons.home),
                  //操作按鈕
                  actions: <Widget>[
                    Icon(Icons.add),
                    Icon(Icons.print),
                  ],
                  //設(shè)置陰影值
                  elevation: 10.0,
                  //是否固定在頂部
                  pinned: true,
                  //可擴(kuò)展區(qū)域高度
                  expandedHeight: 200.0,
                  //與floating結(jié)合使用
                  snap: false,
                  //是否隨著滑動隱藏標(biāo)題
                  floating: false,
                  //擴(kuò)展區(qū)域
                  flexibleSpace: FlexibleSpaceBar(
                    centerTitle: true,
                    title: Text(
                      '這是一個(gè)很酷的標(biāo)題',
                      style: TextStyle(
                        color: Colors.white,
                        fontSize: 16.0,
                      ),
                    ),
                  ),
                ),
              ];
            },
            body: Center(
              child: Text(
                '拖動試試'
              ),
            ),
        ),

2.6 SnackBar

屏幕底部消息

return Center(
      child: GestureDetector(
        onTap: () {
          final snackBar = new SnackBar(
            //提示信息
            content: Text('這是一個(gè)SnackBar'),
            //背景色
            backgroundColor: Colors.green,
            //操作
            action: SnackBarAction(
              textColor: Colors.white,
              label: '撤消',
              onPressed: () {},
            ),
            //持續(xù)時(shí)間
            duration: Duration(minutes: 1),
          );
          Scaffold.of(context).showSnackBar(snackBar);
        },
        child: Text('顯示屏幕底部消息'),
      ),
    );

2.7 TabBar

選項(xiàng)卡，一個(gè)顯示水平選項(xiàng)卡的 Material Design widget。

class DemoPageState extends State<DemoPage> with SingleTickerProviderStateMixin {

  ScrollController _scrollViewController;
  TabController _tabController;

  @override
  void initState(){
    super.initState();
    _scrollViewController = new ScrollController();
    //長度要和展示部分的Tab數(shù)一致
    _tabController = new TabController(vsync: this,length: 6);
  }

  @override
  void dispose(){
    super.initState();
    _scrollViewController.dispose();
    _tabController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return SizedBox(
      height: 500.0,
      child: Scaffold(
        appBar: AppBar(
          title: Text('選項(xiàng)卡'),
          //前置圖標(biāo)
          leading: Icon(Icons.home),
          //應(yīng)用欄背景色
          backgroundColor: Colors.green,
          //選項(xiàng)卡
          bottom: TabBar(
            controller: _tabController,
            //是否可以滾動
            isScrollable: true,
              tabs: <Widget>[
                Tab(text: '科技',icon: Icon(Icons.camera),),
                Tab(text: '吃飯',icon: Icon(Icons.print),),
                Tab(text: '體育',icon: Icon(Icons.favorite),),
                Tab(text: '娛樂',icon: Icon(Icons.share),),
                Tab(text: '電影',icon: Icon(Icons.video_call),),
                Tab(text: '教育',icon: Icon(Icons.airline_seat_flat_angled),),
              ]
          ),
        ),
        //選項(xiàng)卡視圖
        body: TabBarView(controller: _tabController,
            children: <Widget>[
              Text('選項(xiàng)卡1'),
              Text('選項(xiàng)卡2'),
              Text('選項(xiàng)卡3'),
              Text('選項(xiàng)卡4'),
              Text('選項(xiàng)卡5'),
              Text('選項(xiàng)卡6'),
            ]
        ),
      ),
    );
  }
}

三、Box – 組件

3.1 ConstrainedBox

限定最大最小寬高容器，對其子項(xiàng)施加附加約束的 widget

              //添加一個(gè)指定大小的盒子，限定其最大最小寬高
              ConstrainedBox(
                constraints: const BoxConstraints(
                  minWidth: 100.0,
                  minHeight: 20.0,
                  maxHeight: 60.0,
                  maxWidth: 200.0,
                ),
                child: Container(
                  width: 250,
                  height: 80,
                  child: Text(
                    'width>maxWidth height>maxHeight',
                    style: TextStyle(color: Colors.white),
                  ),
                  color: Colors.green,
                ),
              ),

3.2 DecoratedBox

裝飾容器，DecoratedBox 可以在其子 widget 繪制前(或后)繪制一個(gè)裝飾 Decoration（如背景、邊框、漸變等）。

DecoratedBox

            //添加裝飾
            child: DecoratedBox(
                //裝飾定位 DecorationPosition.background背景模式 DecorationPosition.foreground前景模式
                position: DecorationPosition.background,
                decoration: BoxDecoration(
                  //背景色
                  color: Colors.grey,
                  //設(shè)置背景圖片
                  image: DecorationImage(
                    //圖片填充方式
                    fit: BoxFit.cover,
                    image: ExactAssetImage('assets/view.jpeg'),
                  ),
                  //邊框弧度
                  //borderRadius: BorderRadius.circular(10.0),
                  border: Border.all(
                    //邊框顏色
                    color: Colors.red,
                    //邊框粗細(xì)
                    width: 6.0,
                  ),
                  //邊框樣式
                  shape: BoxShape.rectangle,
                ),
              child: Text('定位演示',style: TextStyle(fontSize: 36.0,color: Colors.green),),
            ),

3.3 FittedBox

填充容器，按自己的大小調(diào)整其子 widget 的大小和位置。?FittedBox

/*
          BoxFit.fill  //全部顯示，顯示可能拉伸，充滿
          BoxFit.contain    //全部顯示，顯示原比例，不需充滿
          BoxFit.cover    //顯示可能拉伸，可能裁剪，充滿
          BoxFit.fitWidth    //顯示可能拉伸，可能裁剪，寬度充滿
          BoxFit.fitHeight    //顯示可能拉伸，可能裁剪，高度充滿
          BoxFit.none
          BoxFit.scaleDown   //效果和contain差不多,但是此屬性不允許顯示超過源圖片大小，可小不可大
*/

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'FittedBox填充容器',
      home: new Scaffold(
        appBar: new AppBar(
          title: new Text('FittedBox填充容器'),
        ),

        body: Center(
          child: Column(
            children: <Widget>[
            Container(
                width: 300.0,
                height: 300.0,
                color: Colors.grey,
                child: FittedBox(
                  //填充類型
                  fit: BoxFit.none,
                  //居中對齊
                  alignment: Alignment.center,
                  child: Image.asset('assets/view.jpeg'),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

3.4 OverflowBox

溢出容器，對其子項(xiàng)施加不同約束的 widget，它可能允許子項(xiàng)溢出父級。?OverflowBox

          //溢出容器
          child: OverflowBox(
            //對齊方式
            alignment: Alignment.topLeft,
            //限制條件
            maxWidth: 300.0,
            maxHeight: 500.0,
            child: Container(
              color: Colors.blueGrey,
              width: 400.0,
              height: 400.0,
            ),
          ),

3.5 RotatedBox

旋轉(zhuǎn)容器，可以延順時(shí)針以90度的倍數(shù)旋轉(zhuǎn)其子 widget。RotatedBox

        body: Center(
          child: Column(
            children: <Widget>[

              SizedBox(
                height: 20.0,
              ),
              RotatedBox(
                child: Text('ABCDE',style: TextStyle(fontSize: 28.0),),
                //旋轉(zhuǎn)次數(shù) 每次旋轉(zhuǎn)一圈的1/4
                quarterTurns: 1,
              ),

              SizedBox(
                height: 20.0,
              ),
              RotatedBox(
                child: Text('ABCDE',style: TextStyle(fontSize: 28.0),),
                quarterTurns: 2,
              ),

              SizedBox(
                height: 20.0,
              ),
              RotatedBox(
                child: Text('ABCDE',style: TextStyle(fontSize: 28.0),),
                quarterTurns: 3,
              ),

              SizedBox(
                height: 20.0,
              ),
              RotatedBox(
                child: Text('ABCDE',style: TextStyle(fontSize: 28.0),),
                quarterTurns: 4,
              ),
            ],
          ),
        ),

3.6 SizedBox

指定寬高容器，一個(gè)特定大小的盒子。這個(gè) widget 強(qiáng)制它的孩子有一個(gè)特定的寬度和高度。如果寬度或高度為 NULL，則此 widget 將調(diào)整自身大小以匹配該維度中的孩子的大小。

        body:Center(
          //指定寬高容器 child不允許超出指定大小的范圍
          child: SizedBox(
            width: 200.0,
            height: 200.0,
            //限定圖片大小
            child: Image.asset('assets/cat.jpeg'),
            //子元素
//            child: Container(
//              width: 10.0,
//              height: 10.0,
//              color: Colors.green,
//            ),
          ),
        ),

四、Button – 組件

4.1 DropdownButton

下拉按鈕?DropdownButton

class DropdownButtonDemo extends StatelessWidget {

  List<DropdownMenuItem> generateItemList(){
    final List<DropdownMenuItem> items = new List();
    final DropdownMenuItem item1 = new DropdownMenuItem(child: Text('北京'),value: '北京',);
    final DropdownMenuItem item2 = new DropdownMenuItem(child: Text('上海'),value: '上海',);
    final DropdownMenuItem item3 = new DropdownMenuItem(child: Text('廣州'),value: '廣州',);
    final DropdownMenuItem item4 = new DropdownMenuItem(child: Text('深圳'),value: '深圳',);

    items.add(item1);
    items.add(item2);
    items.add(item3);
    items.add(item4);

    return items;
  }

  @override
  Widget build(BuildContext context) {

    return DropdownButton(
      //提示文本
      hint: Text('請選擇一個(gè)城市'),
      //下拉列表項(xiàng)數(shù)據(jù)
      items: generateItemList(),
      value: selectItemValue,
      //下拉三角型圖標(biāo)大小
      iconSize: 48.0,
      //下拉文本樣式
      style: TextStyle(
        color: Colors.green,
      ),
      //設(shè)置陰影高度
      elevation: 24,
      //將下拉框設(shè)置為水平填充成父級
      isExpanded: true,
      //下拉改變事件
      onChanged: (T){
        var obj = T;
      },
    );
  }
}

4.2 FlatButton

一個(gè)扁平的 Material 按鈕.

FlatButton

</center>

            FlatButton.icon(
                onPressed: (){

                },
                icon: Icon(Icons.print,size: 36.0,),
                label: Text('默認(rèn)按鈕',style: TextStyle(fontSize: 36.0),),
            ),

           FlatButton(
              //文本
              child: Text(
                'Success',
                style: TextStyle(fontSize: 26.0),
              ),
              //按鈕背景色
              color: Colors.green,
              //按鈕亮度
              colorBrightness: Brightness.dark,
              //失效時(shí)的背景色
              disabledColor: Colors.grey,
              //失效時(shí)的文本色
              disabledTextColor: Colors.grey,
              //文本顏色
              textColor: Colors.white,
              //按鈕主題 ButtonTheme ButtonThemeData ButtonTextTheme ThemeData
              textTheme: ButtonTextTheme.normal,
              //墨汁飛濺的顏色
              splashColor: Colors.blue,
              //抗鋸齒能力
              clipBehavior: Clip.antiAlias,
              //內(nèi)邊距
              padding: new EdgeInsets.only(
                bottom: 5.0,
                top: 5.0,
                left: 20.0,
                right: 20.0,
              ),
            ),

4.3 FloatingActionButton

跟 iOS 手機(jī)的小白點(diǎn)一樣，一個(gè)圓形圖標(biāo)按鈕，它懸停在內(nèi)容之上，以展示應(yīng)用程序中的主要?jiǎng)幼鳌loatingActionButton 通常用于Scaffold.floatingActionButton 字段。

FloatingActionButton

</center>

            FloatingActionButton(
              //圖標(biāo)
              child: const Icon(Icons.person),
              //提示信息
              tooltip: '這是一個(gè)自定義的按鈕',
              //背景色
              backgroundColor: Colors.blue,
              //前景色
              foregroundColor: Colors.white,
              //hero效果使用
              heroTag: null,
              //未點(diǎn)擊時(shí)的陰影
              elevation: 8.0,
              //點(diǎn)擊時(shí)的陰影
              highlightElevation: 16.0,
              onPressed: () {},
              // 是否為“mini”類型，默認(rèn)為false,FAB 分為三種類型：regular, mini, and extended
              mini: false,

              //圓角方形的樣式
              shape: RoundedRectangleBorder(
                side: BorderSide(
                  width: 2.0,
                  color: Colors.white,
                  style: BorderStyle.solid,
                ),
                borderRadius: BorderRadius.only(
                  topRight: Radius.circular(8.0),
                  topLeft: Radius.circular(8.0),
                  bottomRight: Radius.circular(8.0),
                  bottomLeft: Radius.circular(8.0),
                ),
              ),
            ),

4.4 IconButton

一個(gè) Material 圖標(biāo)按鈕，點(diǎn)擊時(shí)會有水波動畫。

IconButton</cneter>

           child: IconButton(
              //圖標(biāo)
              icon: Icon(Icons.print),
              //圖標(biāo)大小
              iconSize: 48.0,
              //根據(jù)父容器來決定圖標(biāo)的位置
              alignment: AlignmentDirectional.center,
              color: Colors.green,
              //墨汁飛濺效果
              splashColor: Colors.blue,
              padding: EdgeInsets.only(bottom: 5.0, top: 5.0, left: 30.0, right: 30.0),
              //提示文本
              tooltip: '一個(gè)打印圖標(biāo)',
              //按下
              onPressed: () {},
            ),

4.5 RaisedButton

Material Design 中的 button， 一個(gè)凸起的材質(zhì)矩形按鈕。

RaisedButton
</center>

     child: RaisedButton(
        //文本
        child: Text(
          '點(diǎn)擊登錄按鈕',
          style: TextStyle(fontSize: 26.0),
        ),
        //按鈕背景色
        color: Colors.green,
        //按鈕亮度
        colorBrightness: Brightness.dark,
        //失效時(shí)的背景色
        disabledColor: Colors.grey,
        //失效時(shí)的文本色
        disabledTextColor: Colors.grey,
        //文本顏色
        textColor: Colors.white,
        //按鈕主題 ButtonTheme ButtonThemeData ButtonTextTheme ThemeData
        textTheme: ButtonTextTheme.normal,
        //墨汁飛濺的顏色
        splashColor: Colors.blue,
        //抗鋸齒能力
        clipBehavior: Clip.antiAlias,
        //內(nèi)邊距
        padding: new EdgeInsets.only(
          bottom: 5.0,
          top: 5.0,
          left: 20.0,
          right: 20.0,
        ),
        shape: RoundedRectangleBorder(
          side: new BorderSide(
            width: 2.0,
            color: Colors.white,
            style: BorderStyle.solid,
          ),
          borderRadius: BorderRadius.only(
            topRight: Radius.circular(10.0),
            topLeft: Radius.circular(10.0),
            bottomLeft: Radius.circular(10.0),
            bottomRight: Radius.circular(10.0),
          ),
        ),

        onPressed: () {
          print('按鈕按下操作');
        },
      ),

4.6 RawMaterialButton

RawMaterialButton

     body: RawMaterialButton(
          onPressed: (){},
          textStyle: TextStyle(fontSize: 28.0,color: Colors.black,),
          //文本
          child: Text('RawMaterialButton組件'),
          //高亮?xí)r的背景色
          highlightColor: Colors.red,
          //墨汁飛濺
          splashColor: Colors.blue,
          //搞鋸齒
          clipBehavior: Clip.antiAlias,
          padding: EdgeInsets.only(bottom: 5.0,top: 5.0,left: 30.0,right: 30.0),
          //高亮?xí)r的陰影
          highlightElevation: 10.0,
        ),

待續(xù)

更多信息可以點(diǎn)擊關(guān)于我 , 非常希望和大家一起交流 , 共同進(jìn)步關(guān)于我