Flutter展开竖线

Question

我有一个 ListView，我需要在它的左边加一条展开的垂直线（见下图）。我实现了以下布局，但它扩展到无限。

以上布局的代码如下：

return Scaffold(
  ...
  body: Column(
    children: <Widget>[
      Row(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          Container(
            margin: EdgeInsets.only(left: 4.0),
            color: Colors.grey,
            width: 4.0,
            child: SizedBox.expand(),
          ),
          Flexible(
            child: StreamBuilder( // Creates the list view
              stream: ...,
              builder: ...,
            ),
          ),
        ],
      ),
    ],
  ),
};

由于 SizedBox.expand() 行变得无限，但如何适合屏幕。有什么建议吗？

或者有没有办法从 ListView 项目（没有固定尺寸）获得同样的效果。

Answer 1

如果您只有一个 child，请不要将列用作 Parent，这对我有用：

  return Container(
        child: Row(
          children: <Widget>[
            Container(
              margin: EdgeInsets.only(left: 4.0),
              color: Colors.grey,
              width: 4.0,
            ),
            Expanded(
              child: ListView.builder(
                // Creates the list view
                shrinkWrap: true,
                itemCount: list.length,
                itemBuilder: (context, index) {
                  return ListTile(
                    contentPadding: EdgeInsets.all(20.0),
                    title: Text(list[index].toString()),
                  );
                },
              ),
            ),
          ],
        ),
      );

Flutter展开竖线

Flutter expanded vertical line

android

flutter

flutter-layout