Flutter：固定高度容器内的可滚动列child

Question

我在 ListView 中有几个 containiers，这将导致 scrollable content页面。 每个容器都有一个列作为 child，在列中我有一个标题和一个分隔符，然后是实际内容。

我希望其中一个容器是这样的：

Title
--------- (divider)
Scrollable content (most likely a ListView)

我目前拥有的：

Container(
    height: 250,
    child: Column(children: <Widget>[
        Text('Title'),
        Divider(),
        SingleChildScrollView(
            child: ListView.builder(
                shrinkWrap: true,
                itemCount: 15,
                itemBuilder: (BuildContext context, int index) {
                    return Text('abc');
                }
            )
        )
    ]
)

问题是我希望容器具有特定的高度，但我收到溢出像素错误。

Answer 1

将 ListView.builder() 小部件包裹在 SizedBox() 小部件中，并在容纳 Title() 小部件后指定可用高度。

Container(
    height: 250,
    child: Column(children: <Widget>[
        Text('Title'),
        Divider(),
        SizedBox(
            height: 200, // (250 - 50) where 50 units for other widgets
            child: SingleChildScrollView(
                child: ListView.builder(
                    shrinkWrap: true,
                    itemCount: 15,
                    itemBuilder: (BuildContext context, int index) {
                        return Text('abc');
                    }
                )
            )
        )
    ]
)

您也可以使用 Container() 小部件代替 SizedBox() 小部件，但仅在需要时使用。 SizedBox() 是一个 const 构造函数，而 Container() 小部件不是，因此 SizedBox() 允许编译器创建更高效的代码。

Answer 2

用 Expanded 包裹你的 ListView。删除你的 SingleChildScrollView 因为 ListView 有它自己的滚动行为。尝试如下：

Container(
height: 250,
child: Column(children: <Widget>[
    Text('Title'),
    Divider(),
    Expanded(
      
        child: ListView.builder(
            shrinkWrap: true,
            itemCount: 15,
            itemBuilder: (BuildContext context, int index) {
                return Text('abc');
            }
        ),
    
    )
]
))

Flutter：固定高度容器内的可滚动列child

Flutter: Scrollable Column child inside a fixed height Container

height

containers

scroll

fixed

flutter