代码之家  ›  专栏  ›  技术社区  ›  mvasco

RenderFlex在自定义小部件的右侧溢出

  •  0
  • mvasco  · 技术社区  · 4 年前

    这是电流输出:

    enter image description here

    我最近的目标是得到这样的东西:

    enter image description here

    这里有我当前的小部件代码:

    Widget _usuarios() {
      return Container(
        height: 105,
        width: double.infinity,
        margin: EdgeInsets.only(top: 10.0),
        child: Row(
          children: [
            FlatButton(
              onPressed: null,
              padding: EdgeInsets.all(0.0),
              child: Image.asset('assets/images/buscar_usuario.png'),
            ),
            ListView(
              scrollDirection: Axis.horizontal,
              shrinkWrap: true,
              children: <Widget>[
                Text("item 1"),
                Text("item 2"),
                Text("item 3"),
                Text("item 4"),
                Text("item 1"),
                Text("item 2"),
                Text("item 3"),
                Text("item 4"),
                Text("item 1"),
                Text("item 2"),
                Text("item 3"),
                Text("item 4"),
                Text("item 1"),
                Text("item 2"),
                Text("item 3"),
                Text("item 4"),
              ],
            ),
          ],
        ),
      );
    }
    

    我不希望按钮与列表一起滚动。我宁愿让按钮始终可见,而应用程序用户可以滚动用户的列表。

    2 回复  |  直到 4 年前
        1
  •  1
  •   Faiizii Awan    4 年前

         Expanded(
            child: ListView(
              scrollDirection: Axis.horizontal,
              shrinkWrap: true,
            ),
          ),
    

    你的ListView获得了它想要的宽度。通过将其包装在展开的小部件中,它将指定列表视图的宽度,或者给它一个约束,使其只填充剩余的宽度。

        2
  •  1
  •   ajay    4 年前

    为了克服这个问题,你可以使用 Expanded

    Row(
      children: [
        Expanded(
            flex: 2,
            child: FlatButton()),
        Expanded(
            flex: 8,
            child: ListView()),
      ],
    );
    

    这里flex是孩子们可以占据的空间量。