flutter showModalBottomSheet常用屬性及說明
更新時間：2022年09月28日 15:36:28 作者：solomanlove
這篇文章主要介紹了flutter showModalBottomSheet常用屬性及說明，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
showModalBottomSheet常用屬性
在使用showModalBottomSheet這個控件時，想要設(shè)置圓角，在內(nèi)容widget設(shè)置不管用，然后直接看這個控件的實現(xiàn)原理，一看有個shape屬性，感覺有戲！果然設(shè)置完畢后，成功了。
注意：一定不要設(shè)置builder中的背景顏色，否則會覆蓋導(dǎo)致不能顯示出圓角！
showModalBottomSheet
shape可以設(shè)置成自己想要的形狀！通常直接設(shè)置圓角即可
isScrollControlled：是否時全屏還是半屏isDismissible：外部是否可以點擊，false不可以點擊，true可以點擊，點擊后消失backgroundColor: 通?？梢栽O(shè)置白色和透明，barrierColor:設(shè)置遮擋底部的半透明顏色,默認(rèn)是black54,可以設(shè)置成透明的;enableDrag: 是否可以向下拖動關(guān)閉,默認(rèn)是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;
? }
}調(diào)用方法
?ClipPath( ? ? ? ? ? ? ? ? ? ? ? clipper: BottomClipper(), ? ? ? ? ? ? ? ? ? ? ? child: Container(), )
底部彈窗
底部彈起
showModalBottomSheet(
context: context,
builder:(BuildContext context){
return TabMyApp();//返回的是一個容器
}
);
// ps：這個控件由于是系統(tǒng)自帶空間，下面帶了一個白色背景容器，導(dǎo)致彈起容器不能設(shè)置圓角
// 解決思路，因為這個背景的大小取決于覆蓋于其上的容器大小，故，可以給他一個很小的容器，再用用stack控件把一個較大的
// 的控件懸浮其上，在設(shè)置懸浮其上的容器，這樣看不到下邊大概是
Stack(
alignment: const FractionalOffset(0.5, 0.935),//相對坐標(biāo)
children: <Widget>[
SizeBox(
height:10
),
// 看的到的容器 設(shè)置圓角
Container(
height:300
...
)
]
)
下拉框
DropdownButtonHideUnderline(
child:new DropdownButton(
hint: new Text(''),//第一次把hint展示位下拉菜單條目的第一個值（默認(rèn)值）
//設(shè)置這個value之后,選中對應(yīng)位置的item，
//再次呼出下拉菜單，會自動定位item位置在當(dāng)前按鈕顯示的位置處
value: selectItemValue,//下拉菜單選擇完之后,呈現(xiàn)給用的值
items: generateItemList(),//下拉菜單item點擊之后的回調(diào)
iconSize: 24.0,
isDense: true,
onChanged: (T){
setState(() {
selectItemValue=T;
});
}
),
),
回調(diào)函數(shù)
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,//開關(guān)的名稱
this.backgroundColor,//展開背景色
this.onExpansionChanged,
this.children = const <Widget>[],
this.trailing,
this.initiallyExpanded = false,//默認(rèn)關(guān)閉
}) : 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,//數(shù)字鍵盤
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>(//調(diào)用方法
context: context, //BuildContext對象
barrierDismissible: false,
builder: (BuildContext context) {
return new LoadingDialog( //調(diào)用對話框
text: '滾燙',
ponto: "https://ss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=3463668003,3398677327&fm=58"
);
});
//彈出的內(nèi)容
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(//創(chuàng)建折疊層
alignment: const FractionalOffset(0.5, 0.935),//相對坐標(biāo)
children: <Widget>[
//底層
new Material( //創(chuàng)建透明層
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('恭喜發(fā)財，大吉大利',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){//回調(diào)函數(shù)
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控件，并自帶點擊 和 長按 兩個事件，
- 同時在用到按鈕的時候，我發(fā)現(xiàn)自帶的按鈕都有一定的大小，用InkWell寫的按鈕可以自定義大小
多文字一行顯示不同效果
RichText(
text: TextSpan(
children: <TextSpan>[
TextSpan(
text:' 黑名單功能目標(biāo)：一是期望能打擊具有不良行為的個人和單位的社會聲譽，促使其與您',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相當(dāng)于html里的span，屬于行級元素
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
Android中Viewpager禁止滑動的實現(xiàn)
有時候在開發(fā)中會遇到一些特別的要求，如在ViewPager中嵌入ListView，或者再嵌入一個ViewPager，那么在滑動的時候就會造成被嵌入的XXView不能滑動了，那么就把最外層的ViewPager禁止滑動吧，本文就介紹了Android中Viewpager禁止滑動的實現(xiàn)方法，需要的朋友可以參考。2017-05-05
Flutter進(jìn)階之實現(xiàn)動畫效果（六）
這篇文章主要為大家詳細(xì)介紹了Flutter進(jìn)階之實現(xiàn)動畫效果第六篇，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-08-08
Android實現(xiàn)圖片在屏幕內(nèi)縮放和移動效果
這篇文章主要為大家詳細(xì)介紹了Android控制圖片在屏幕內(nèi)縮放和移動效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-02-02
FrameLayout是Android開發(fā)中非常常見的布局組件，并且它不單單是一個幀布局組件，可以用它實現(xiàn)多種功能，感興趣的朋友一起來看看吧2022-03-03
Android實現(xiàn)點擊切換視圖并跳轉(zhuǎn)傳值
這篇文章主要為大家詳細(xì)介紹了Android實現(xiàn)點擊切換視圖并跳轉(zhuǎn)傳值，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-01-01
Android 監(jiān)聽Notification 被清除實例代碼
本文主要介紹Android 監(jiān)聽Notification 事件,這里給大家提供實例代碼進(jìn)行參考,有需要的小伙伴可以參考下2016-07-07
Android Popupwindow彈出窗口的簡單使用方法
這篇文章主要為大家詳細(xì)介紹了Android Popupwindow彈出窗口的簡單使用方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-07-07
這篇文章主要介紹了Android View.onMeasure方法詳解及實例的相關(guān)資料,需要的朋友可以參考下2017-05-05
詳解android在mob平臺實現(xiàn)qq登陸和分享
這篇文章主要介紹了詳解android在mob平臺實現(xiàn)qq登陸和分享，對接入第三方平臺SDK感興趣的同學(xué)們，可以參考下2021-04-04
這篇文章主要給大家介紹了關(guān)于android中webview定位問題的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧。2017-12-12