技術標籤：flutter 彈窗自己關閉

Flutter底部彈窗showModalBottomSheet（）詳解

分兩部分內容，基礎引數設定和顯示高度調整

修改高度為自適應，請檢視【Flutter】Flutter底部彈窗ModalBottomSheet詳解2，設定高度為包裹內容

建構函式引數詳解

Future<T> showModalBottomSheet<T>({
  @required BuildContext context, 
  @required WidgetBuilder builder, 
  Color backgroundColor,
  double elevation,
  ShapeBorder shape,
  Clip clipBehavior,
  Color barrierColor,
  bool isScrollControlled = false,
  bool useRootNavigator = false,
  bool isDismissible = true,
  bool enableDrag = true,
})
 

• builder：構造內容
• backgroundColor：背景顏色指的是顯示內容下面的顏色，要設定圓角彈窗，該項使用null，預設是灰白色，根據系統主題
• elevation ：陰影高度，沒看出效果
• ShapeBorder： 邊線，可以指定單邊或者多邊，還可以是圓形的，ShapeBorder的子類都可以，還可以設定圓角
• clipBehavior ：widget剪裁模式，分none、hardEdge、antiAlias、antiAliasWithSaveLayer，效率依次降低，效果依次提高
• barrierColor： 蒙版顏色，就是遮住原頁面內容的半透明黑色，預設是Colors.black54
• isScrollControlled ：是否可滾動，用於調整內容部分的高度的模式，後面展開詳細
• useRootNavigator： 一般用不上

官方解釋：/// If `rootNavigator` is set to true, the state from the furthest instance of /// this class is given instead. Useful for pushing contents above all subsequent /// instances of [Navigator].

• isDismissible ：點選外部區域是否關閉彈窗，預設true
• enableDrag： 啟用拖拽功能，拖動彈窗關閉，預設true

看下面的圖，基本把能設定的屬性都設定上了，原始碼在圖下方

showModalBottomSheet(
            context: context,
            backgroundColor: Colors.green[200],
            barrierColor: Color(0x8DFFCDD2),//半透明紅色
//這裡是圓形的邊線
//          shape: CircleBorder(
//                side: BorderSide(
//              color: Colors.amber,
//              width: 5,
//            )),
            shape: Border(
            //底部邊線
              bottom: BorderSide(
                color: Colors.amber,
                width: 10,
              ),
              //右邊邊線
              right: BorderSide(
                color: Colors.amber,
                width: 10,
              ),
            ),
            isDismissible: true,
            enableDrag: true,
            builder: (context) {
              return Container(
              //設定背景顏色為白色，並且設定3個角圓角
                decoration: BoxDecoration(
                  color: Colors.white,
                  borderRadius: BorderRadius.only(
                      topLeft: Radius.circular(100),
                      topRight: Radius.circular(100),
                      bottomLeft: Radius.circular(100)),
                ),
                child: ....
             }

彈窗高度設定

isScrollControlled設定true時窗會變成全屏彈窗，檢視下原始碼，提取核心邏輯

@override
  BoxConstraints getConstraintsForChild(BoxConstraints constraints) {
    return BoxConstraints(
      minWidth: constraints.maxWidth,
      maxWidth: constraints.maxWidth,
      minHeight: 0.0,
      maxHeight: isScrollControlled
        ? constraints.maxHeight
        : constraints.maxHeight * 9.0 / 16.0,
    );
  }

該段邏輯的意思就是從彈窗layout計算時的constraints的獲取尺寸（傳入的寬高約束是layout時根據child計算的），將彈窗內容寬度無腦設為child的最大值（實際測試寬度都是螢幕寬度，不可調整），高度的話isScrollControlled=true時設定為最大值，否則設定是constraints.maxHeight * 9.0 / 16.0,在內容部分不設定約束時constraints.maxHeight就是螢幕高度，接下就可以自己設定高度了。

showModalBottomSheet(
    context: context,
    isScrollControlled: true,
    builder: (context) {
              return Container(
                decoration: BoxDecoration(
                  color: Colors.white,
                ),
                constraints: BoxConstraints(maxHeight: 700),//設定maxHeight為你想要的數字就行
   }
)

原始碼地址：https://github.com/ZXQ-Kyle/Flutter_widget_test/blob/master/show_modal_bottom_sheet.dart