flutter showModalBottomSheet常用屬性及說明

2022-09-30 14:02:06

showModalBottomSheet常用屬性

在使用showModalBottomSheet這個控制元件時，想要設定圓角，在內容widget設定不管用，然後直接看這個控制元件的實現原理，一看有個shape屬性，感覺有戲！果然設定完畢後，成功了。

注意：一定不要設定builder中的背景顏色，否則會覆蓋導致不能顯示出圓角！

showModalBottomSheet

shape可以設定成自己想要的形狀！通常直接設定圓角即可

isScrollControlled：是否時全螢幕還是半屏
isDismissible：外部是否可以點選，false不可以點選，true可以點選，點選後消失
backgroundColor : 通常可以設定白色和透明，
barrierColor:設定遮擋底部的半透明顏色,預設是black54,可以設定成透明的;
enableDrag: 是否可以向下拖動關閉,預設是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;
  }
}

呼叫方法

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

底部彈窗

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

下拉框

DropdownButtonHideUnderline(
                          child:new DropdownButton(
                              hint: new Text(''),//第一次把hint展示位下拉式選單條目的第一個值（預設值）
                              //設定這個value之後,選中對應位置的item，
                              //再次撥出下拉式選單，會自動定位item位置在當前按鈕顯示的位置處
                              value: selectItemValue,//下拉式選單選擇完之後,呈現給用的值
                              items: generateItemList(),//下拉式選單item點選之後的回撥
                              iconSize: 24.0,
                              isDense: true,
                              onChanged: (T){
                                setState(() {
                                  selectItemValue=T;
                                });
                              }
                          ),
                        ),
回撥函數
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,//開關的名稱
    this.backgroundColor,//展開背景色
    this.onExpansionChanged,
    this.children = const <Widget>[],
    this.trailing,
    this.initiallyExpanded = false,//預設關閉
  }) : 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,//數位鍵盤
                    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),),
              ],
            ),
          ],
        ),

彈出框加疊加（一個紅包的樣子）

showDialog<Null>(//呼叫方法
                      context: context, //BuildContext物件
                      barrierDismissible: false,
                      builder: (BuildContext context) {
                        return new LoadingDialog( //呼叫對話方塊
                            text: '滾燙',
                            ponto:  "https://ss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=3463668003,3398677327&fm=58"
                        );
                      });
//彈出的內容
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(//建立摺疊層
      alignment: const FractionalOffset(0.5, 0.935),//相對座標
      children: <Widget>[
        //底層
        new Material( //建立透明層
        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('恭喜發財，大吉大利',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){//回撥函數
                      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裡看到的控制元件，用這個可以自己組合Tile控制元件，並自帶點選和長按兩個事件，
同時在用到按鈕的時候，我發現自帶的按鈕都有一定的大小，用InkWell寫的按鈕可以自定義大小

多文字一行顯示不同效果

 RichText(
                      text: TextSpan(
                          children: <TextSpan>[
                            TextSpan(
                              text:'        黑名單功能目標：一是期望能打擊具有不良行為的個人和單位的社會聲譽，促使其與您',style:TextStyle(fontSize: 15,color: Colors.white),),
                            TextSpan(text:'和解',style:TextStyle(fontSize: 18,color: Colors.blue),),
                            TextSpan(text:'；二是為使用者提供一個向親朋好友',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相當於html裡的span，屬於行級元素

以上為個人經驗，希望能給大家一個參考，也希望大家多多支援it145.com。