flutter 抖动：ListView.builder中的自动垂直高度

ttp71kqs 于 2023-01-27 发布在 Flutter

关注(0)|答案(6)|浏览(178)

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

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]),
      );
    },
  ),
}

当文档['summary']太长时，它会使文本在卡片小部件中溢出。这次我所做的就是在ListView中增加itemExtent。Builder
有没有办法动态设置ListView的高度？

flutter

来源：https://stackoverflow.com/questions/54017508/flutter-auto-vertical-height-in-listview-builder

6条答案

按热度按时间

gkl3eglg1#

只需要加上shrinkWrap: true。
删除itemExtent: 225.0,（& R）

ListView.builder(
  shrinkWrap: true,
  itemCount:  snapshot.data.documents.length,
  itemBuilder: (context, index) =>
        _buildListItems(context, snapshot.data.documents[index]),
 },
),

赞(0）回复(0）举报 2023-01-27

wlp8pajw2#

我认为该列具有mainAxisSize属性

Column(
  mainAxisSize: MainAxisSize.min,
)

MainAxisSize.min将列大小拉伸到子列的最小大小。与之相对的是MainAxisSize.max，它将拉伸到它所能达到的最大大小。
但是我还没有测试过，希望能有所帮助

赞(0）回复(0）举报 2023-01-27

ca1c2owp3#

你可以用我的实现

Widget adapter(List<String> strings){
    List<Widget> widgets= List<Widget>();
    for(int i=0;i<strings.length;i++){
      widgets.add(Text(strings[i]));
    }

    Row row=Row(
            children: <Widget>[
              Column(
                mainAxisSize: MainAxisSize.min,
                crossAxisAlignment: CrossAxisAlignment.start,
                children:widgets
              ),
            ],
          );
    return row;
  }

此示例显示字符串列表

赞(0）回复(0）举报 2023-01-27

r6l8ljro4#

只是不要指定itemExtent参数。
或者只给予它一个null值，而不是225.0
这样，子对象将获得所需的确切身高并输入ListView

赞(0）回复(0）举报 2023-01-27

mklgxw1f5#

试试

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

赞(0）回复(0）举报 2023-01-27

ovfsdjhp6#

ListView.builder(
                        padding: EdgeInsets.zero,
                        shrinkWrap: true,
                        itemCount: provider.products.length,
                        itemBuilder: (BuildContext context, int index) {
                          return InkWell(
                            onTap: () => viewProductDetail(provider.products[index]),
                            child: const OrderDetailsWidgets().orderedProducts(
                              title: provider.products[index].itemName ?? '',
                              price: '---',
                              img: provider.products[index].productImage ??
                                  'request-list-image.png',
                              context: context,
                            ),
                          );
                        },
                      ),

为列表视图添加零填充.builder减少了高度

赞(0）回复(0）举报 2023-01-27

我来回答

flutter 抖动：ListView.builder中的自动垂直高度

6条答案

相关问题

热门标签

最新问答