特色栏目： python 批处理 net编程 Javascript Php Asp Css Html5 Android seo centos

fluttershowModalBottomSheet常用属性及说明

来源：互联网收集：自由互联发布时间：2023-02-01

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

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

以上为个人经验，希望能给大家一个参考，也希望大家多多支持自由互联。

上一篇：浮动AppBar中的textField焦点回滚问题解决
下一篇：没有了