flutter showModalBottomSheet常用属性及说明

目录

• showModalBottomSheet常用属性
• showModalBottomSheet
• flutter常见控件及例子
• 贝塞尔曲线
• 底部弹窗
• 下拉框
• 展开闭合控件
• 输入框
• 弹出框加叠加（一个红包的样子）

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，属于行级元素

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。