Flutter - ListView.builder具有非常大的尺寸，不会改变

Question

如何使用ListView.builder减少项目的大小 我已经尝试修改ItemCategory中的所有内容，但大小保持不变。

根据下图所示，使用ListView，尺寸是最小的商品：

使用Flutter - Strange ListView behavior after refresh代码，项目大小合适，但是将ListView更改为ListView.builder大小会发生变化并且ItemCategory类是相同的

没有ListView.builder

使用ListView.builder

import 'package:flutter/material.dart';
import 'dart:math';

void main() {
  runApp(new MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      home: new CategoryPage(),
    );
  }
}

class CategoryPage extends StatefulWidget {
  @override
  CategoryPageState createState() => new CategoryPageState();
}

class CategoryPageState extends State<CategoryPage> {
  Color blueAppBar = new Color(0xFF26C6DA);
  List<Widget> listCategories = [];
  List listaDB = [];
  List lista2DB = [];
  List listaCategory;
  final List<Widget> children = <Widget>[];

  String randomString(int length) {
    var rand = new Random();
    var codeUnits = new List.generate(
        length, 
        (index){
          return rand.nextInt(33)+89;
        }
    );   
    return new String.fromCharCodes(codeUnits);
  }

  @override
  void initState() {
    this.listaDB = 
      [
        [{'category': 'foo01'}],
        [{'category': 'foo02'}],
        [{'category': 'foo03'}],
        [{'category': 'foo04'}],
        [{'category': 'foo05'}],
        [{'category': 'foo06'}],
        [{'category': 'foo07'}],
        [{'category': 'foo08'}],
        [{'category': 'foo09'}],
        [{'category': 'foo10'}],
        [{'category': 'foo11'}],
        [{'category': 'foo12'}],
        [{'category': 'foo13'}],
        [{'category': 'foo14'}],
        [{'category': 'foo15'}],
        [{'category': 'foo16'}],
        [{'category': 'foo17'}],
        [{'category': 'foo18'}],
        [{'category': 'foo19'}],
        [{'category': 'foo20'}],
        [{'category': 'foo21'}],
        [{'category': 'foo22'}],
        [{'category': 'foo23'}],
        [{'category': 'foo24'}]
      ];

    for(var i in this.listaDB) {
      var category = i[0]['category'];
      children.add(
        new ItemCategory(
          key: new Key(randomString(20)),
          category: category,
        )
      );
    }
  }

  @override
  Widget build(BuildContext context) {   
    return new Scaffold( 
      appBar: new AppBar(
        title: new Text('Categories'),
        backgroundColor: blueAppBar,
        actions: <Widget>[
          new IconButton(
            icon: new Icon(Icons.refresh),
            onPressed: () {
              setState(() {
                children.clear();
                for(var i in this.lista2DB) {
                  var category = i[0]['category'];
                  children.add(
                    new ItemCategory(
                      key: new Key(randomString(20)),
                      category: category,
                    )
                  );
                }
              });
            },
          )
        ],
      ),
      body: new ListView.builder(
        itemBuilder: (BuildContext context, int index) => children[index],
        itemExtent: 128.0,
        itemCount: children.length,
      ),
    );
  }
}

class ItemCategory extends StatelessWidget {
  final String category;

  ItemCategory({
    Key key,
    this.category}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return new Container(
      decoration: new BoxDecoration(
        border: new Border(
          top: new BorderSide(style: BorderStyle.solid, color: Colors.black26),
        ),
        color: new Color(0xFFFAFAFA),
      ),
      margin: new EdgeInsets.only(top: 0.0, bottom: 0.0),
      child: new Row(
        mainAxisAlignment: MainAxisAlignment.start,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: <Widget>[
          new Expanded(
            child: new Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: <Widget>[
                new Container(
                  margin: new EdgeInsets.only(left: 16.0),
                  padding: new EdgeInsets.only(right: 40.0, top: 4.5, bottom: 4.5),
                  child: new Row(
                    children: <Widget>[
                      new Container(
                        margin: new EdgeInsets.only(right: 16.0),
                        child: new Icon(
                          Icons.brightness_1,
                          color: Colors.black,
                          size: 35.0,
                        ),
                      ),
                      new Text(this.category),
                    ],
                  )
                )
              ],
            ),
          )
        ],
      ),
    );
  }
}

Answer 1

要使用正确的尺寸，只需将值itemExtent: 128.0更改为较小的数字，例如itemExtent: 46.0

定义每个子项的大小，您可以将其删除，构建器将根据每个项目的维度计算每个项目的大小。删除itemExtent以自动计算。

ListView也需要一个密钥，因为当更新到另一个列表时，如果每个列表没有自己的密钥，则列表以错误的方式挂载。

ListView代码应如下所示：

body: new ListView.builder(
  key: new Key(randomString(20)), //new
  itemBuilder: (BuildContext context, int index) => children[index],
  //itemExtent: 128.0,
  itemCount: children.length,
),

通过进行此更改，列表已正确安装。

Answer 2

使用itemExtent是一个很好的习惯，因为

指定[itemExtent]比让[ 孩子们确定自己的范围，因为滚动机械 可以利用孩子的认知程度来节省 例如，当滚动位置急剧变化时，该功能就可以发挥作用。

因此，当我们为itemExtent声明任何值时，它将帮助Listview快速呈现，因为现在不用担心小部件之间的高度计算。因此，在这种情况下，静态高度有效。

Answer 3

visualDensity:VisualDensity(horizontal: 0, vertical: -4),