flutterFlutter:组件

Flutter之showModalBottomSheet函数

2019-02-19  本文已影响2人  习惯了_就好
/**
 * 底部面板,相当于弹出了一个新页面
 * 默认点击消失,可以给子组件外面包一层GestureDetector并设置onTap返回false,拦截点击事件使点击底部面板区域,面板不消失。
 * 底部面板的高度是有限制的,不能设置全屏高度
 */
body: Center(
          child: Row(
            children: <Widget>[
              RaisedButton(
                onPressed: () {
                  showModalBottomSheet(
                    context: context,
                    builder: (BuildContext context) {
                      return Container(
                        height: 200.0,
                        color: Color(0xfff1f1f1),
                        child: Center(
                          child: Text("底部面板,点击消失"),
                        ),
                      );
                    },
                  );
                },
                child: Text("底部面板,点击消失"),
              ),
              RaisedButton(
                onPressed: () {
                  showModalBottomSheet(
                    context: context,
                    builder: (BuildContext context) {
                      return GestureDetector(
                        child: Container(
                          height: 2000.0,
                          color: Color(0xfff1f1f1),
                          child: Center(
                            child: Text("底部面板,点击底部面板不消失"),
                          ),
                        ),
                        onTap: () => false,
                      );
                    },
                  );
                },
                child: Text("底部面板,点击底部面板不消失"),
              ),
            ],
          ),
        ),
上一篇 下一篇

猜你喜欢

热点阅读