flutter showModalBottomSheet常用属性及说明
更新时间：2022年09月28日 15:36:28 作者：solomanlove
这篇文章主要介绍了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，属于行级元素
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
有时候在开发中会遇到一些特别的要求，如在ViewPager中嵌入ListView，或者再嵌入一个ViewPager，那么在滑动的时候就会造成被嵌入的XXView不能滑动了，那么就把最外层的ViewPager禁止滑动吧，本文就介绍了Android中Viewpager禁止滑动的实现方法，需要的朋友可以参考。2017-05-05
这篇文章主要为大家详细介绍了Flutter进阶之实现动画效果第六篇，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-08-08
这篇文章主要为大家详细介绍了Android控制图片在屏幕内缩放和移动效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-02-02
FrameLayout是Android开发中非常常见的布局组件，并且它不单单是一个帧布局组件，可以用它实现多种功能，感兴趣的朋友一起来看看吧2022-03-03
这篇文章主要为大家详细介绍了Android实现点击切换视图并跳转传值，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-01-01
Android 监听Notification 被清除实例代码
本文主要介绍Android 监听Notification 事件,这里给大家提供实例代码进行参考,有需要的小伙伴可以参考下2016-07-07
Android Popupwindow弹出窗口的简单使用方法
这篇文章主要为大家详细介绍了Android Popupwindow弹出窗口的简单使用方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-07-07
这篇文章主要介绍了Android View.onMeasure方法详解及实例的相关资料,需要的朋友可以参考下2017-05-05
这篇文章主要介绍了详解android在mob平台实现qq登陆和分享，对接入第三方平台SDK感兴趣的同学们，可以参考下2021-04-04
这篇文章主要给大家介绍了关于android中webview定位问题的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧。2017-12-12
最新评论