微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

用于 Flutter 的 showModalBottomSheet 内的页眉、页脚和可滚动主体?

如何解决用于 Flutter 的 showModalBottomSheet 内的页眉、页脚和可滚动主体?

showModalBottomSheet(
  context: context,builder: (BuildContext context) {
    return Container(
      padding: EdgeInsets.only(left: 10.0,right: 10.0,bottom: 10.0),child: Column(
        mainAxisSize: MainAxisSize.min,children: [
          Text('HEADER'),Scrollbar(
            thickness: 5.0,radius: Radius.circular(5.0),child: SingleChildScrollView(
              child: Column(
                children: [
                  Text('BODY'),Text('BODY'),],),Text('FOOTER'),);
  },);

enter image description here

好的,到目前为止没有问题。我在 isScrollControlled 上省略了 showModalBottomSheet,这样您就无法向上拖动以填满屏幕。我希望它在视口高度的一半处最大化(我认为这是认约束?)我还希望它调整到它的内容直到它达到这个最大高度。但是,如果我向 SingleChildScrollView Column 添加更多小部件,它会溢出:

enter image description here

我希望“主体”最大化其高度,页眉和页脚之间的剩余空间可以滚动,但它只是变得不受约束。一旦 showModalBottomSheet 达到其高度限制,我该怎么做才能仅使“正文”内容可滚动?

解决方法

我只是通过一些更改实现了它。 isScrollControlled: true 用于底部工作表和 Flexible(child: ListView(...)) 小部件。

试试吧,https://dartpad.dev/6f76b09c942f8c44d89504032c355ff5

showModalBottomSheet(
  isScrollControlled: true,context: context,builder: (BuildContext context) {
    return Container(
      padding: EdgeInsets.only(left: 10.0,right: 10.0,bottom: 10.0),child: Column(
        mainAxisSize: MainAxisSize.min,children: <Widget>[
          Text('HEADER'),Flexible(
            child: ListView(
              shrinkWrap: true,children: List<Text>.generate(1000,(x) => Text("CHILD")),),Text('FOOTER'),],);
  },);

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。