flutter showModalBottomSheet常用屬性及說明

更新時(shí)間：2022年09月28日 15:36:28 作者：solomanlove

這篇文章主要介紹了flutter showModalBottomSheet常用屬性及說明，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

showModalBottomSheet常用屬性

在使用showModalBottomSheet這個(gè)控件時(shí)，想要設(shè)置圓角，在內(nèi)容widget設(shè)置不管用，然后直接看這個(gè)控件的實(shí)現(xiàn)原理，一看有個(gè)shape屬性，感覺有戲！果然設(shè)置完畢后，成功了。

注意：一定不要設(shè)置builder中的背景顏色，否則會覆蓋導(dǎo)致不能顯示出圓角！

showModalBottomSheet

shape可以設(shè)置成自己想要的形狀！通常直接設(shè)置圓角即可

isScrollControlled：是否時(shí)全屏還是半屏
isDismissible：外部是否可以點(diǎn)擊，false不可以點(diǎn)擊，true可以點(diǎn)擊，點(diǎn)擊后消失
backgroundColor : 通?？梢栽O(shè)置白色和透明，
barrierColor:設(shè)置遮擋底部的半透明顏色,默認(rèn)是black54,可以設(shè)置成透明的;
enableDrag: 是否可以向下拖動關(guān)閉,默認(rèn)是true打開的;

以下代碼：

  showModalBottomSheet(
      context: context,
       isScrollControlled:false,
      backgroundColor: Colors.white,
      shape: RoundedRectangleBorder(borderRadius: BorderRadius.all(Radius.circular(10))),
      builder: (BuildContext context) {
        return Container(
        	height:50,//對話框高度就是此高度
          child: Center(child: Text("居中文字")),
        );
      });

flutter常見控件及例子

貝塞爾曲線

class BottomClipper extends CustomClipper<Path>{//切割類繼承
? @override
? Path getClip(Size size) {//必備屬性一
? ? var path = Path();
? ? path.lineTo(0, 0);
? ? path.lineTo(0, size.height-60);
? ? var frit = Offset(size.width/2,size.height);
? ? var frit2 = Offset(size.width,size.height-60);
? ? path.quadraticBezierTo(frit.dx, frit.dy, frit2.dx, frit2.dy);//二次貝塞爾曲線
? ? path.lineTo(size.width, size.height-60);
? ? path.lineTo(size.width, 0);
? ? return path;
? }
? @override
? bool shouldReclip(CustomClipper<Path> oldClipper) {//必備屬性二
? ? // TODO: implement shouldReclip
? ? return false;
? }
}

調(diào)用方法

?ClipPath(
? ? ? ? ? ? ? ? ? ? ? clipper: BottomClipper(),
? ? ? ? ? ? ? ? ? ? ? child: Container(),
)

底部彈窗

底部彈起
 showModalBottomSheet(
                      context: context,
                      builder:(BuildContext context){
                        return  TabMyApp();//返回的是一個(gè)容器
                      }
                    );
// ps：這個(gè)控件由于是系統(tǒng)自帶空間，下面帶了一個(gè)白色背景容器，導(dǎo)致彈起容器不能設(shè)置圓角
// 解決思路，因?yàn)檫@個(gè)背景的大小取決于覆蓋于其上的容器大小，故，可以給他一個(gè)很小的容器，再用用stack控件把一個(gè)較大的
// 的控件懸浮其上，在設(shè)置懸浮其上的容器，這樣看不到下邊大概是
Stack(
    alignment: const FractionalOffset(0.5, 0.935),//相對坐標(biāo)
      children: <Widget>[
         SizeBox(
			height:10
		),
        // 看的到的容器 設(shè)置圓角 
		Container(
			height:300
			...
		)
]
)

下拉框

DropdownButtonHideUnderline(
                          child:new DropdownButton(
                              hint: new Text(''),//第一次把hint展示位下拉菜單條目的第一個(gè)值（默認(rèn)值）
                              //設(shè)置這個(gè)value之后,選中對應(yīng)位置的item，
                              //再次呼出下拉菜單，會自動定位item位置在當(dāng)前按鈕顯示的位置處
                              value: selectItemValue,//下拉菜單選擇完之后,呈現(xiàn)給用的值
                              items: generateItemList(),//下拉菜單item點(diǎn)擊之后的回調(diào)
                              iconSize: 24.0,
                              isDense: true,
                              onChanged: (T){
                                setState(() {
                                  selectItemValue=T;
                                });
                              }
                          ),
                        ),
回調(diào)函數(shù)
var selectItemValue;
  var selectItemValue1;
  /*DropDownState(){
    selectItemValue=getDropdownMenuItem()[0].value;
  }*/
  List<DropdownMenuItem> generateItemList() {
    List<DropdownMenuItem> items = new List();
    for(int i =0;i<100;i++){
      DropdownMenuItem itemi = new DropdownMenuItem(
          value: i.toString(), child: new Text(i.toString())
      );
      items.add(itemi);
    }
    return items;
  }

展開閉合控件

ExpansionTile 
const ExpansionTile({
    Key key,
    this.leading,
    @required this.title,//開關(guān)的名稱
    this.backgroundColor,//展開背景色
    this.onExpansionChanged,
    this.children = const <Widget>[],
    this.trailing,
    this.initiallyExpanded = false,//默認(rèn)關(guān)閉
  }) : assert(initiallyExpanded != null),
       super(key: key);

輸入框

Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              mainAxisSize: MainAxisSize.min,
              children: <Widget>[
                Container(
                  constraints: BoxConstraints.tightFor( width: 200.0),
                  child:  TextField(
                    autofocus: false,
                    //maxLength: 8,
                    textAlign: TextAlign.right,//右對齊
                    keyboardType: TextInputType.number,//數(shù)字鍵盤
                    onChanged: (v) {
                      setState(() {
                        price = double.parse('$v');
                      });
                      //記錄金額
                      print("onChange: $v");
                    },
                    decoration: InputDecoration(
                        border: InputBorder.none,//去掉輸入框的下滑線
                        hintText: "0.00",
                        hintStyle: TextStyle( fontSize: 14.0)
                    ),
                  ),
                ),
                Text(' 元  ',style: TextStyle(color: Colors.black),),
              ],
            ),
          ],
        ),

彈出框加疊加（一個(gè)紅包的樣子）

showDialog<Null>(//調(diào)用方法
                      context: context, //BuildContext對象
                      barrierDismissible: false,
                      builder: (BuildContext context) {
                        return new LoadingDialog( //調(diào)用對話框
                            text: '滾燙',
                            ponto:  "https://ss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=3463668003,3398677327&fm=58"
                        );
                      });
//彈出的內(nèi)容
class LoadingDialog extends Dialog {
  String text;//傳遞的名字
  String ponto;//頭像地址
  LoadingDialog({Key key, @required this.text,this.ponto}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    var stack = new Stack(//創(chuàng)建折疊層
      alignment: const FractionalOffset(0.5, 0.935),//相對坐標(biāo)
      children: <Widget>[
        //底層
        new Material( //創(chuàng)建透明層
        type: MaterialType.transparency, //透明類型
          child: new Center( //保證控件居中效果
            child: new SizedBox(
              width: 260.0,
              height: 420.0,
              child: new Container(
                decoration: ShapeDecoration(
                  color: Colors.red,
                  shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.all(
                      Radius.circular(8.0),
                    ),
                  ),
                ),
                child: new Column(
                  mainAxisAlignment: MainAxisAlignment.start,
                  crossAxisAlignment: CrossAxisAlignment.center,
                  children: <Widget>[
                    //new CircularProgressIndicator(),
                    ClipPath(
                      clipper: BottomClipper(),
                      child: Container(
                        height: 360,
                        width: 300,
                        //color:
                        decoration: ShapeDecoration(
                          color: Colors.red[600],
                          shape: RoundedRectangleBorder(
                            borderRadius: BorderRadius.all(
                              Radius.circular(8.0),
                            ),
                          ),
                        ),
                        child: Column(
                          mainAxisAlignment: MainAxisAlignment.center,
                          children: <Widget>[
                            Image.network(
                              ponto,
                              scale: 3.0,
                            ),
                            SizedBox(
                              height: 10,
                            ),
                            Text(text,style: new TextStyle(fontSize: 16.0,color: Colors.orangeAccent)),
                            Text('恭喜發(fā)財(cái)，大吉大利',style: new TextStyle(fontSize: 24.0,color: Colors.orangeAccent)),
                            SizedBox(
                              height: 100,
                            ),
                          ],
                        ),
                      ),
                    ),
                  ],
                ),
              ),
            ),
          ),
        ),
       //折疊層
        Container(
          height: 200,
          child:Column(
            children: <Widget>[
              Container(
                height: 70,
                width: 70,
                child: FlatButton(
                  onPressed: (){
                    Navigator.push( context,
                        new MaterialPageRoute(builder: (context) {
                          return  Hongbaoxiangqing();
                        })).then((String){//回調(diào)函數(shù)
                      Navigator.pop(context);
                    });
                  },
                  child: Text('開',style: TextStyle(fontSize: 30),),
                ),
                decoration: BoxDecoration( //背景裝飾
                  color: Colors.amber[200],
                  borderRadius: BorderRadius.circular(35),
                ),
              ),
              SizedBox(
                height: 70,
              ),
              FlatButton(
                  onPressed: (){
                    Navigator.pop(context);
                  },
                  child:Icon(
                    Icons.clear,color: Colors.red[800],
                  )
              )
            ],
          ),
        ),
      ],
    );
    return stack;
  }
}
//美化界面
class BottomClipper extends CustomClipper<Path>{//切割類繼承
  @override
  Path getClip(Size size) {//必備屬性一
    var path = Path();
    path.lineTo(0, 0);
    path.lineTo(0, size.height-60);
    var frit = Offset(size.width/2,size.height);
    var frit2 = Offset(size.width,size.height-60);
    path.quadraticBezierTo(frit.dx, frit.dy, frit2.dx, frit2.dy);//二次貝塞爾曲線
    path.lineTo(size.width, size.height-60);
    path.lineTo(size.width, 0);
    return path;
  }
  @override
  bool shouldReclip(CustomClipper<Path> oldClipper) {//必備屬性二
    // TODO: implement shouldReclip
    return false;
  }
}

InkWell

inkWell 在listTile里看到的控件，用這個(gè)可以自己組合Tile控件，并自帶點(diǎn)擊和長按兩個(gè)事件，
同時(shí)在用到按鈕的時(shí)候，我發(fā)現(xiàn)自帶的按鈕都有一定的大小，用InkWell寫的按鈕可以自定義大小

多文字一行顯示不同效果

 RichText(
                      text: TextSpan(
                          children: <TextSpan>[
                            TextSpan(
                              text:'        黑名單功能目標(biāo)：一是期望能打擊具有不良行為的個(gè)人和單位的社會聲譽(yù)，促使其與您',style:TextStyle(fontSize: 15,color: Colors.white),),
                            TextSpan(text:'和解',style:TextStyle(fontSize: 18,color: Colors.blue),),
                            TextSpan(text:'；二是為用戶提供一個(gè)向親朋好友',style:TextStyle(fontSize: 15,color: Colors.white),),
                            TextSpan(text:'示警',style:TextStyle(fontSize: 18,color: Colors.red),),
                            TextSpan(text:'的平臺；三是心中有氣，',style:TextStyle(fontSize: 15,color: Colors.white),),
                            TextSpan(text:'不吐不快',style:TextStyle(fontSize: 18,color: Colors.green),),
                            TextSpan(text:'。',style:TextStyle(fontSize: 15,color: Colors.white),),
                          ]
                      ),
                    ),

RichText為必須，TextSpan相當(dāng)于html里的span，屬于行級元素

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: