flutter showModalBottomSheet常用属性
solomanlove 人气:0showModalBottomSheet常用属性
在使用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，属于行级元素
以上为个人经验，希望能给大家一个参考，也希望大家多多支持。
加载全部内容