Flutter（26）：Material组件之BottomSheet

Flutter教学目录持续更新中

Github源代码持续更新中

1.BottomSheet介绍

• showBottomSheet：从底部滑出的widget
• showModalBottomSheet：从底部滑出的widget，这个比showBottomSheet在显示多一个遮盖背景

2.showBottomSheet属性

• context：BuildContext
• builder：WidgetBuilder
• backgroundColor：背景色
• elevation：阴影
• shape：形状

3.showModalBottomSheet属性

• context：BuildContext
• builder：WidgetBuilder
• backgroundColor：背景色
• elevation：阴影
• shape：形状
• barrierColor：遮盖背景颜色
• isDismissible：点击遮盖背景是否可消失
• enableDrag：下滑消失

4.showBottomSheet

• 这个方法有两种，一种是直接使用showBottomSheet()方法，还有一种是 Scaffold.of(context).showBottomSheet()，其实这两种是一样的，showBottomSheet()最后还是调用后者

• showBottomSheet()方法内的context必须是Scaffold下的context，所以使用的时候必须是在Scaffold内使用Build去创建

  
  
  1601463533(1).png

1601463544(1).png

 _myBottomSheet(String s) {
    return Container(
      padding: EdgeInsets.all(10),
      child: Row(
        children: [
          Expanded(
            flex: 1,
            child: Text(
              s,
              style: TextStyle(color: Colors.white, fontSize: 14),
            ),
          ),
          FlatButton(
            onPressed: () {
              Navigator.of(context).pop();
            },
            child: Text(
              '知道了',
              style: TextStyle(color: Colors.white, fontSize: 14),
            ),
          )
        ],
      ),
    );
  }

_showBottomSheet(BuildContext context) {
    showBottomSheet(
      context: context,
      builder: (context) {
        return _myBottomSheet('showBottomSheet');
      },
      backgroundColor: Colors.black54,
      elevation: 10,
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(5),
      ),
    );
  }

_scaffoldShowBottomSheet(BuildContext context) {
    Scaffold.of(context).showBottomSheet(
      (context) {
        return _myBottomSheet('scaffoldShowBottomSheet');
      },
      backgroundColor: Colors.black54,
      elevation: 10,
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(5),
      ),
    );
  }

5.showModalBottomSheet

1601463569(1).png

_showModalBottomSheet(BuildContext context) {
    showModalBottomSheet(
      context: context,
      builder: (context) {
        return _myBottomSheet('showModalBottomSheet');
      },
      backgroundColor: Colors.black54,
      elevation: 10,
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(5),
      ),
      // barrierColor: Colors.amber.shade100,
      isDismissible: false,
      enableDrag: true,
    );
  }

下一节：Material组件之SnackBar

Flutter（27）：Material组件之SnackBar

Flutter教学目录持续更新中

Github源代码持续更新中