flutter 系統(tǒng)widget歸納(持續(xù)更新)

SafeArea

  • 顧名思義，安全區(qū)域，指的是除app的導(dǎo)航欄以及狀態(tài)欄等區(qū)域，如果頁面沒有這個，寫的內(nèi)容可能會上到狀態(tài)欄，下到導(dǎo)航欄，里面的屬性一般用不到

Scaffold

  • 相當(dāng)于對每個頁面一些常用的內(nèi)容的封裝，包含appBar(頂部標(biāo)題欄)，bottomNavigationBar(app底部標(biāo)題欄)，floatingActionButton(浮動按鈕)，draw(抽屜模式，會默認(rèn)將appbar的leading的點擊事件設(shè)置為打開抽屜)，body(app內(nèi)容)等

Scaffold常用屬性解析

  1. appBar
    • leading：appBar的左邊按鈕，默認(rèn)是返回，如果自定義圖片后需要自己設(shè)置下返回事件，代碼示例：
    • title：標(biāo)題內(nèi)容。
    • centerTitle：標(biāo)題是否居中，默認(rèn)false，靠左
    • bottom：標(biāo)題欄下方的View，一般可放個tabbar，以實現(xiàn)多頁面切換效果

界面展示效果


image.png

代碼示例

appBar: AppBar(
  leading: IconButton(
  icon: LoadAssetImage(imgPath + 'icon_left_black_24px',
    width: 24, height: 24),
    onPressed: () {
      Navigator.maybePop(context);
    },
  ),
  backgroundColor: Colors.white,
  centerTitle: true,
  title: Text(
    'Profile', //LAN
    style: TextStyle(fontSize: 18, color: Colors.black),
    ),
),
  1. bottomNavigationBar
    • items：直接放多個BottomNavigationBarItem子類的條目去實現(xiàn)批量重復(fù)布局，類似于原生的radiogroup+radiobutton，配合currentIndex，selectedItemColor等屬性去使用
    • shape：可配合child屬性，對導(dǎo)航欄上面的界面實現(xiàn)任意布局，相當(dāng)于原生里用layout等布局去手動實現(xiàn)效果

注：配合floatingActionButton可實現(xiàn)底部按鈕凹陷效果，此時需要設(shè)置個floatingActionButtonLocation組件，該組件跟floatingActionButton平級

頁面展示效果：


image.png

示例代碼

bottomNavigationBar: BottomNavigationBar(
  items: const <BottomNavigationBarItem>[
  BottomNavigationBarItem(
    icon: Icon(Icons.home),
    label: 'Home',
    ),
  BottomNavigationBarItem(
    icon: Icon(Icons.business),
    label: 'Business',
    ),
  BottomNavigationBarItem(
    icon: Icon(Icons.school),
    label: 'School',
    ),
  ],
  currentIndex: 0,
  selectedItemColor: Colors.amber[800],
  // onTap: _onItemTapped,
),

頁面展示效果：


image.png

示例代碼：

bottomNavigationBar: BottomAppBar(
  shape: const CircularNotchedRectangle(),
  child: Row(
    children: [
      IconButton(icon: Icon(Icons.home)),
      SizedBox(),
      IconButton(icon: Icon(Icons.business))
      ],
    mainAxisAlignment: MainAxisAlignment.spaceAround,
  )
),
floatingActionButton: FloatingActionButton(
  child: Icon(Icons.add),
),
floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,

Container

  • 最常用的容器，可定義寬高，內(nèi)間距外間距，設(shè)置邊框線(border),對齊方式(alignment)等屬性
    示例代碼：
Container(
  color: Colours.dark_gray_f1,
  alignment: Alignment.centerLeft,
  padding: EdgeInsets.only(left: 15),
  decoration: new BoxDecoration(
    color: Colors.white,
    borderRadius: BorderRadius.all(Radius.circular(25.0)),
    border: new Border.all(width: 1, color: Colors.red),
  ),
  height: 30,
  child: Text(
    itle,
    style: TextStyle(fontSize: 13, color: Colours.dark_black_666),
  ),
);

GestureDetector

  • 手勢識別器，可給任意控件增加點擊事件onTap(){},當(dāng)你發(fā)現(xiàn)條目使用了這個包裝后，空白處無法點擊需要增加該屬性 behavior: HitTestBehavior.opaque
    示例代碼如下:
GestureDetector(
  behavior: HitTestBehavior.opaque,
  child: Container(),
  onTap: () {
    //do something
  }
)

Expanded

  • 展開widget，一般用在Row，Column里，可將不確定高度的組件自適應(yīng)展開

ListView

  • 列表，可當(dāng)ScrollView使用，批量創(chuàng)建列表的時候用ListView.separated(itemBuilder:,separatorBuilder:,itemCount:)，itemBuilder是每個條目的樣式，separatorBuilder是分割線的樣式，itemCount是條目數(shù)量，如果每個條目需要手動創(chuàng)建的話就用ListView(children: [])，如果不能完全展示，就手動指定高度，或者使用Expanded來把他展開
    示例代碼(僅提供separated方式實現(xiàn))：
ListView.separated(
  itemBuilder: (BuildContext context, int index) =>_buildBankCardItem(cardData[index], controllers[index]),
  eparatorBuilder: (BuildContext context, int index) =>Container(),
  itemCount: cardData == null ? 0 : cardData.length
)

Tabbar

  • 可放在appbar的bottom里(請翻閱前面的appbar模塊)，也可直接放在appbar中間(不寫title，直接使用appbar里的flexibleSpace屬性)，常用屬性有controller，isScrollable(是否可滾動)，tabs(具體的tab集合)，indicatorColor(指示器顏色)，indicatorWeight(指示器高度)，indicatorPadding(指示器內(nèi)間距)，indicator(自定義指示器樣式)，indicatorSize(指示器寬度)，labelColor(文本顏色)，labelStyle(文本樣式)，labelPadding(文本內(nèi)邊距)，unselectedLabelColor(未選中文本的顏色)，unselectedLabelStyle(未選中文本的樣式)，onTap(回調(diào)監(jiān)聽)
    body里可用TabBarView形成聯(lián)動效果

頁面效果展示:


image.png

示例代碼：

appBar: AppBar(
  flexibleSpace: Container(
  alignment: Alignment.center,
  child: TabBar(
    controller: _tabController,
    labelColor: Colours.purple_color,
    unselectedLabelColor: Colours.black_333,
    indicatorColor: Colours.purple_color,
    labelStyle: TextStyle(fontSize: 16),
    tabs: [
      Tab(
         text:'Deposit',
      ),
      Tab(
        text: 'Transfer',
      )
    ],
    isScrollable: true,
    ),
  ),
  backgroundColor: Colours.white_color,
)

TextField

  • 輸入框，常用屬性controller，focusNode，decoration(裝飾器)，onChanged(內(nèi)容變化監(jiān)聽)，obscureText(是否隱藏文本，密碼隱藏時候可用)，keyboardType(鍵盤類型)，textInputAction(鍵盤右下角的按鈕)，maxLength(最大長度，設(shè)置后會有默認(rèn)計數(shù)器)
    • 重點說下decoration:InputDecoration，InputDecoration常用屬性:counter(自定義計數(shù)器)，
      • 圖標(biāo)：icon(左側(cè)外圖標(biāo))，prefixIcon(左側(cè)內(nèi)圖標(biāo))，suffixIcon(右側(cè)內(nèi)圖標(biāo))
      • textCapitalization(首字母大小寫)：worlds(單詞首字母大寫)，sentences(句子的首字母大寫)，characters(所有字母大寫)，none(默認(rèn)無)
      • 提示文字：labelText(懸浮提示)，errorText(錯誤提示)，helperText(幫助提示文字)，hintText(默認(rèn)提示)，
      • 去掉下劃線：decoration: InputDecoration.collapsed(),或者decoration:null(該方式?jīng)]有提示文字)
      • 邊框：border:InputBorder.none，UnderlineInputBorder(下劃線)，OutlineInputBorder(外邊框)，
      • 關(guān)閉軟鍵盤：focusNode.unFocus()，

showCupertinoDialog

  • 顯示IOS風(fēng)格的彈框CupertinoAlertDialog
    • 常用屬性content(彈框的具體樣式，可使用自帶的CupertinoAlertDialog，也可使用自定義布局)，actions(點擊事件，里面可放CupertinoDialogAction數(shù)組)

頁面效果展示：


image.png

示例代碼:

showCupertinoDialog(context: widgetContext,builder: (context) {
  return CupertinoAlertDialog(
    title: Text('確認(rèn)刪除'),
    actions: [
      CupertinoDialogAction(
        child: Text('確認(rèn)'),
        onPressed: () {
          Navigator.of(context).pop();
        },
      ),
      CupertinoDialogAction(
        child: Text('取消'),
        isDestructiveAction: true,
        onPressed: () {
          Navigator.of(context).pop();
        },
      ),
    ],
    );
  },
);

頁面效果展示：


image.png

示例代碼：

showCupertinoDialog(context: widgetContext,builder: (context) {
  return CupertinoAlertDialog(
    title: Text('請評價'),
    content: Text('\n我們很重視您的評價！'),
    actions: [
      CupertinoDialogAction(
        child: Text('非常好'),
        onPressed: () {
          Navigator.of(context).pop();
        },
      ),
      CupertinoDialogAction(
        child: Text('一般'),
        onPressed: () {
          Navigator.of(context).pop();
        },
      ),
      CupertinoDialogAction(
        child: Text('非常差'),
        isDestructiveAction: true,
        onPressed: () {
          Navigator.of(context).pop();
        },
      ),
    ],
    );
  },
);

showGeneralDialog

  • 居中彈框

showModalBottomSheet

  • 底部彈框

自定義dialog

頁面顯示效果：


image.png

示例代碼：

import 'package:flutter/material.dart';
class LoadingDialog extends Dialog {
  String text;
  LoadingDialog({Key key, @required this.text}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return new Material(
      //創(chuàng)建透明層
      type: MaterialType.transparency, //透明類型
      child: new Center(
        //保證控件居中效果
        child: new SizedBox(
          width: 100.0,
          height: 100.0,
          child: new Container(
            decoration: ShapeDecoration(
              color: Color(0xffffffff),
              shape: RoundedRectangleBorder(
                borderRadius: BorderRadius.all(
                  Radius.circular(8.0),
                ),
              ),
            ),
            child: new Column(
              mainAxisAlignment: MainAxisAlignment.center,
              crossAxisAlignment: CrossAxisAlignment.center,
              children: <Widget>[
                new CircularProgressIndicator(),
                new Padding(
                  padding: const EdgeInsets.only(
                    top: 20.0,
                  ),
                  child: new Text(
                    text,
                    style: new TextStyle(fontSize: 12.0),
                  ),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容