Flutter:ListView.builder 中的自动垂直高度

Cha*_*aHS 9 height listview flutter flutter-layout

我正在尝试使用 ListView.builder 显示一些卡片
我想将每张卡片的高度自动设置为其子内容的高度

class HomePage extends StatelessWidget {
 Widget _buildListItems(BuildContext context, DocumentSnapshot document) {
  return Center(
   child: Card(
    child: Column(
      children: <Widget>[
        ListTile(
          title: Text(document['title']),
          subtitle: Text(document['subtitle']),
        ),
        Expanded(
          child: Container(
            padding: EdgeInsets.all(20.0),
            child: Text(
              document['summary'],
              softWrap: true,
            ),
          ),
        )
      ],
    ),
  ),
);
}


@override
Widget build(BuildContext context) {
return Scaffold(
  appBar: AppBar(
    title: Text('Title'),
    centerTitle: true,
  ),
  body: StreamBuilder(
    stream: Firestore.instance.collection('randomDB').snapshots(),
    builder: (context, snapshot) {
      if (!snapshot.hasData) return const Text('Loading...');
      return ListView.builder(
        itemExtent: 225.0,
        itemCount: snapshot.data.documents.length,
        itemBuilder: (context, index) =>
            _buildListItems(context, snapshot.data.documents[index]),
      );
    },
  ),
}
Run Code Online (Sandbox Code Playgroud)

当 document['summary'] 太长时,它会使文本通过卡片小部件溢出。这次我所做的就是增加 ListView.Builder 中的 itemExtent

有没有办法动态设置 ListView 的高度?

Mod*_*Mod 22

只需添加shrinkWrap: true.

& 消除 itemExtent: 225.0,

ListView.builder(
  shrinkWrap: true,
  physics: NeverScrollableScrollPhysics(),
  itemCount:  snapshot.data.documents.length,
  itemBuilder: (context, index) =>
        _buildListItems(context, snapshot.data.documents[index]),
 },
),
Run Code Online (Sandbox Code Playgroud)

  • 这非常有效,并且可能是在“Column”中使用“ListView.builder”进行设置的最简单、最灵活的解决方案。谢谢 (2认同)

Muh*_*man 8

我相信这个专栏有一个叫做mainAxisSize属性的东西

Column(
  mainAxisSize: MainAxisSize.min,
)
Run Code Online (Sandbox Code Playgroud)

MainAxisSize.min将使列大小拉伸到子项的最小大小。与它相反的是MainAxisSize.max将拉伸到它可以达到的最大尺寸。

但是我还没有测试它。希望它会有所帮助