滚动浏览Flutter底表

Question

我正在使用Flutter模态底页显示一些选项供用户选择。 我有一个Column，其中有ListTile的列表作为底部的内容。

我的问题是，如果我有6个以上的ListTile，则其中的一些会被截断而不显示。

有没有一种方法可以使底部工作表可滚动？

Answer 1

如果您想要可以滚动的模型底页。

您可以使用showModalBottomSheet的isScrollControlled属性来达到效果。

---

如果您想要一个可以滚动的持久性底页。

您可以使用DraggableScrollableSheet

示例：

    class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('DraggableScrollableSheet'),
      ),
      body: SizedBox.expand(
        child: DraggableScrollableSheet(
          builder: (BuildContext context, ScrollController scrollController) {
            return Container(
              color: Colors.blue[100],
              child: ListView.builder(
                controller: scrollController,
                itemCount: 25,
                itemBuilder: (BuildContext context, int index) {
                  return ListTile(title: Text('Item $index'));
                },
              ),
            );
          },
        ),
      ),
    );
  }
}

Here是Flutter团队的官方视频。

可以在here上找到DartPad上的实时演示。

Answer 2

我找到了实现以下代码的解决方案

void _showBottomSheet(BuildContext context) {
showModalBottomSheet(
  context: context,
  isScrollControlled: true,
  backgroundColor: Colors.transparent,
  builder: (context) {
    return GestureDetector(
      onTap: () => Navigator.of(context).pop(),
      child: Container(
        color: Color.fromRGBO(0, 0, 0, 0.001),
        child: GestureDetector(
          onTap: () {},
          child: DraggableScrollableSheet(
            initialChildSize: 0.4,
            minChildSize: 0.2,
            maxChildSize: 0.75,
            builder: (_, controller) {
              return Container(
                decoration: BoxDecoration(
                  color: Colors.white,
                  borderRadius: BorderRadius.only(
                    topLeft: const Radius.circular(25.0),
                    topRight: const Radius.circular(25.0),
                  ),
                ),
                child: Column(
                  children: [
                    Icon(
                      Icons.remove,
                      color: Colors.grey[600],
                    ),
                    Expanded(
                      child: ListView.builder(
                        controller: controller,
                        itemCount: 100,
                        itemBuilder: (_, index) {
                          return Card(
                            child: Padding(
                              padding: EdgeInsets.all(8),
                              child: Text("Element at index($index)"),
                            ),
                          );
                        },
                      ),
                    ),
                  ],
                ),
              );
            },
          ),
        ),
      ),
    );
  },
 );
}

Answer 3

只需将您的Column更改为ListView，就像这样：

return ListView(
  children: <Widget>[
    ...
  ]
);

如果我不希望滚动工作表的内容，而是滚动工作表本身，该怎么办？

如果您希望用户能够向上滑动底部面板以填充屏幕，那么恐怕在模块化底部面板的当前实现中这是不可能的。

Answer 4

与 this one 几乎相同的解决方案，但没有不必要的手势检测层等。

重要的部分是 expand: false, 中的 DraggableScrollableSheet，因为它默认为 true。这会导致底部工作表在默认配置中扩展到全高。将此设置为 false 后，无需使用两个手势检测器包裹底部纸张来检测外部点击。

同样在这种情况下，只需要一种形状。

showModalBottomSheet(
  context: context,
  isScrollControlled: true,
  isDismissible: true,
  shape: const RoundedRectangleBorder(
      borderRadius:
          BorderRadius.vertical(top: Radius.circular(16))),
  builder: (context) => DraggableScrollableSheet(
    initialChildSize: 0.4,
    minChildSize: 0.2,
    maxChildSize: 0.75,
    expand: false,
    builder: (_, controller) => Column(
      children: [
        Icon(
          Icons.remove,
          color: Colors.grey[600],
        ),
        Expanded(
          child: ListView.builder(
            controller: controller,
            itemCount: 100,
            itemBuilder: (_, index) {
              return Card(
                child: Padding(
                  padding: EdgeInsets.all(8),
                  child: Text("Element at index($index)"),
                ),
              );
            },
          ),
        ),
      ],
    ),
  ),
);