Question

我有一个ListView占据了一半的屏幕。我的listview的设计是一行，其中有两个展开的行（flex 1色灰色[用于设计]和flex 10色bluegrey [用于我的列表内容]）。

我想将列表视图的设计扩展到屏幕的其余部分。我认为我可以通过将我的listview包裹在一列中，然后在一行中放一个扩展而我的两个放在一起来扩展，但这没有用... 一切都包裹在SingleChildScrollView中。

捕获到的异常是：RenderFlex子级具有非零的flex，但是传入的高度限制是不受限制的。

这是代码：

SingleChildScrollView(
    child: Column(
      children: <Widget>[
        Container(
          color: Colors.grey,
          child: ListView.builder(
            shrinkWrap: true,
            physics: NeverScrollableScrollPhysics(),
            itemBuilder: (context, index) {
              return DossierTile(
                dossier: dossier[index],
              );
            },
            itemCount: length,
          ),
        ),
        //Expanded( // I try to add this expanded but it didn't work.
          child: Row(
            children: <Widget>[
              Expanded(
                flex: 1,
                child: Container(
                  color: Colors.grey,
                ),
              ),
              Expanded(
                flex: 10,
                child: Container(
                  color: Colors.blueGrey,
                ),
              ),
            ],
          ),
        //)
      ],
    ),
  );

这里是我正在寻找的照片：

Answer 1

如果您的ListView仅在屏幕的右侧，则只需要在该部分滚动视图即可。

ListView是线性排列的小组件的可滚动列表。ListView不需要SingleChildScrollView。

捕获到的异常是：RenderFlex子级具有非零的flex，但是传入的高度约束是不受限制的。

此问题的原因是您将SingleChildScrollView作为Column的父级，这使垂直约束变为无限，并且不能使用具有无限高度的Expanded。

因此，重构代码后，您就可以这样做。

@override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        child: Row(
          children: <Widget>[
            Expanded(
              flex: 1,
              child: Container(
                color: Colors.grey,
              ),
            ),
            Expanded(
              flex: 10,
              child: Container(
                color: Colors.blueGrey,
                child: ListView.builder(
                  itemBuilder: (context, index) {
                    return ListTile(
                      leading: Icon(Icons.location_on),
                    );
                  },
                  itemCount: 5,
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }

在列颤振内展开一行

1 个答案: