Flutter - ListView.builder 尺寸非常大并且不会改变

如何使用ListView.builder我已经尝试修补所有的东西ItemCategory但大小保持不变。

使用 ListView 时，尺寸是最小的，如下图所示：

使用Flutter - 刷新后 ListView 的奇怪行为 https://stackoverflow.com/questions/48662795/flutter-strange-listview-behavior-after-refresh代码中的项目大小合适，但是通过更改ListView toListView.builder尺寸完全改变并且ItemCategory班级是一样的

without ListView.builder

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

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

它定义了每个子项的大小，您可以将其删除，构建器将根据每个项目的尺寸计算其大小。去除itemExtent即可自动计算。

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

The ListView代码应该如下所示：

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

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