第fluttershowModalBottomSheet常用屬性及說(shuō)明目錄showModalBottomSheet常用屬性showModalBottomSheetflutter常見控件及例子貝塞爾曲線底部彈窗下拉框展開閉合控件輸入框彈出框加疊加（一個(gè)紅包的樣子）

showModalBottomSheet常用屬性

在使用showModalBottomSheet這個(gè)控件時(shí)，想要設(shè)置圓角，在內(nèi)容widget設(shè)置不管用，然后直接看這個(gè)控件的實(shí)現(xiàn)原理，一看有個(gè)shape屬性，感覺(jué)有戲！果然設(shè)置完畢后，成功了。

注意：一定不要設(shè)置builder中的背景顏色，否則會(huì)覆蓋導(dǎo)致不能顯示出圓角！

showModalBottomSheet

shape可以設(shè)置成自己想要的形狀！通常直接設(shè)置圓角即可

isScrollControlled：是否時(shí)全屏還是半屏isDismissible：外部是否可以點(diǎn)擊，false不可以點(diǎn)擊，true可以點(diǎn)擊，點(diǎn)擊后消失backgroundColor:通常可以設(shè)置白色和透明，barrierColor:設(shè)置遮擋底部的半透明顏色,默認(rèn)是black54,可以設(shè)置成透明的;enableDrag:是否可以向下拖動(dòng)關(guān)閉,默認(rèn)是true打開的;

以下代碼：

showModalBottomSheet(

context:context,

isScrollControlled:false,

backgroundColor:Colors.white,

shape:RoundedRectangleBorder(borderRadius:BorderRadius.all(Radius.circular(10))),

builder:(BuildContextcontext){

returnContainer(

height:50,//對(duì)話框高度就是此高度

child:Center(child:Text("居中文字")),

flutter常見控件及例子

貝塞爾曲線

classBottomClipperextendsCustomClipperPath{//切割類繼承

@override

PathgetClip(Sizesize){//必備屬性一

varpath=Path();

path.lineTo(0,0);

path.lineTo(0,size.height-60);

varfrit=Offset(size.width/2,size.height);

varfrit2=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);

returnpath;

@override

boolshouldReclip(CustomClipperPatholdClipper){//必備屬性二

//TODO:implementshouldReclip

returnfalse;

}

調(diào)用方法

ClipPath(

clipper:BottomClipper(),

child:Container(),

)

底部彈窗

底部彈起

showModalBottomSheet(

context:context,

builder:(BuildContextcontext){

returnTabMyApp();//返回的是一個(gè)容器

//ps：這個(gè)控件由于是系統(tǒng)自帶空間，下面帶了一個(gè)白色背景容器，導(dǎo)致彈起容器不能設(shè)置圓角

//解決思路，因?yàn)檫@個(gè)背景的大小取決于覆蓋于其上的容器大小，故，可以給他一個(gè)很小的容器，再用用stack控件把一個(gè)較大的

//的控件懸浮其上，在設(shè)置懸浮其上的容器，這樣看不到下邊大概是

Stack(

alignment:constFractionalOffset(0.5,0.935),//相對(duì)坐標(biāo)

children:Widget[

SizeBox(

height:10

//看的到的容器設(shè)置圓角

Container(

height:300

下拉框

DropdownButtonHideUnderline(

child:newDropdownButton(

hint:newText(''),//第一次把hint展示位下拉菜單條目的第一個(gè)值（默認(rèn)值）

//設(shè)置這個(gè)value之后,選中對(duì)應(yīng)位置的item，

//再次呼出下拉菜單，會(huì)自動(dòng)定位item位置在當(dāng)前按鈕顯示的位置處

value:selectItemValue,//下拉菜單選擇完之后,呈現(xiàn)給用的值

items:generateItemList(),//下拉菜單item點(diǎn)擊之后的回調(diào)

iconSize:24.0,

isDense:true,

onChanged:(T){

setState((){

selectItemValue=T;

varselectItemValue;

varselectItemValue1;

/*DropDownState(){

selectItemValue=getDropdownMenuItem()[0].value;

ListDropdownMenuItemgenerateItemList(){

ListDropdownMenuItemitems=newList();

for(inti=0;ii++){

DropdownMenuItemitemi=newDropdownMenuItem(

value:i.toString(),child:newText(i.toString())

items.add(itemi);

returnitems;

展開閉合控件

ExpansionTile

constExpansionTile({

Keykey,

this.leading,

@requiredthis.title,//開關(guān)的名稱

this.backgroundColor,//展開背景色

this.onExpansionChanged,

this.children=constWidget[],

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,//右對(duì)齊

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),),

彈出框加疊加（一個(gè)紅包的樣子）

showDialogNull(//調(diào)用方法

context:context,//BuildContext對(duì)象

barrierDismissible:false,

builder:(BuildContextcontext){

returnnewLoadingDialog(//調(diào)用對(duì)話框

text:'滾燙',

ponto:"/6ONWsjip0QIZ8tyhnq/it/u=3463668003,3398677327fm=58"

//彈出的內(nèi)容

classLoadingDialogextendsDialog{

Stringtext;//傳遞的名字

Stringponto;//頭像地址

LoadingDialog({Keykey,@requiredthis.text,this.ponto}):super(key:key);

@override

Widgetbuild(BuildContextcontext){

varstack=newStack(//創(chuàng)建折疊層

alignment:constFractionalOffset(0.5,0.935),//相對(duì)坐標(biāo)

children:Widget[

//底層

newMaterial(//創(chuàng)建透明層

type:MaterialType.transparency,//透明類型

child:newCenter(//保證控件居中效果

child:newSizedBox(

width:260.0,

height:420.0,

child:newContainer(

decoration:ShapeDecoration(

color:Colors.red,

shape:RoundedRectangleBorder(

borderRadius:BorderRadius.all(

Radius.circular(8.0),

child:newColumn(

mainAxisAlignment:MainAxisAlignment.start,

crossAxisAlignment:CrossAxisAlignment.center,

children:Widget[

//newCircularProgressIndicator(),

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[

Iwork(

ponto,

scale:3.0,

SizedBox(

height:10,

Text(text,style:newTextStyle(fontSize:16.0,color:Colors.orangeAccent)),

Text('恭喜發(fā)財(cái)，大吉大利',style:newTextStyle(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,

newMaterialPageRoute(builder:(context){

returnHongbaoxiangqing();

})).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],

returnstack;

//美化界面

classBottomClipperextendsCustomClipperPath{//切割類繼承

@override

PathgetClip(Sizesize){//必備屬性一

varpath=Path();

path.lineTo(0,0);

path.lineTo(0,size.height-60);

varfrit=Offset(size.width/2,size.height);

varfrit2=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);

returnpath;

@override

boolshouldReclip(CustomClipperPatholdClipper){//必備屬性二

//TODO:implementshouldReclip

returnfalse;

InkWell

inkWell在listTile里看到的控件，用這個(gè)可以自己組合Tile控件，并自帶點(diǎn)擊和長(zhǎng)按兩個(gè)事件，同時(shí)在用到按鈕的時(shí)候，我發(fā)現(xiàn)自帶的按鈕都有一定的大小，用I