美文网首页flutterFlutter:组件
Flutter之showModalBottomSheet函数

Flutter之showModalBottomSheet函数

作者: 习惯了_就好 | 来源:发表于2019-02-19 14:21 被阅读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("底部面板,点击底部面板不消失"),
              ),
            ],
          ),
        ),

相关文章

网友评论

    本文标题:Flutter之showModalBottomSheet函数

    本文链接:https://www.haomeiwen.com/subject/umaxyqtx.html