Flutter-ListView.builder具有非常大的大小，并且不会更改 [英] Flutter - ListView.builder with very large size and does not change

问题描述

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

根据下面的图片，使用ListView的尺寸是最小的商品:

使用

使用ListView.builder

  import'package:flutter/material.dart';导入'dart:math';void main(){runApp(new MyApp());}MyApp类扩展了StatelessWidget {@override窗口小部件build(BuildContext context){返回新的MaterialApp(主页:新的CategoryPage()，);}}类CategoryPage扩展了StatefulWidget {@overrideCategoryPageState createState()=>新的CategoryPageState();}类CategoryPageState扩展了State< CategoryPage>.{颜色blueAppBar =新颜色(0xFF26C6DA);列表< Widget>listCategories = [];列出listaDB = [];列出lista2DB = [];列出listaCategory;最终List< Widget>子代=< Widget> [];字符串randomString(int length){var rand = new Random();var codeUnits = new List.generate(长度，(指数){返回rand.nextInt(33)+89;});返回新的String.fromCharCodes(codeUnits);}@override无效的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(此this.listaDB中的var i){var category = i [0] ['category'];children.add(新的ItemCategory(键:新键(randomString(20))，类别:类别，));}}@override窗口小部件build(BuildContext context){返回新的脚手架(appBar:新的AppBar(标题:new Text('Categories')，backgroundColor:blueAppBar，动作:< Widget> [新的IconButton(图标:new Icon(Icons.refresh)，onPressed:(){setState((){children.clear();for(在this.lista2DB中的var i){var category = i [0] ['category'];children.add(新的ItemCategory(键:新键(randomString(20))，类别:类别，));}});}，)]，)，正文:新的ListView.builder(itemBuilder:(BuildContext上下文，int索引)=>儿童[索引]，itemExtent:128.0，itemCount:children.length，)，);}}ItemCategory类扩展了StatelessWidget {最后的String类别；ItemCategory({关键this.category}):super(key:key);@override窗口小部件build(BuildContext context){返回新的容器(装饰:新BoxDecoration(边框:新边框(顶部:新的BorderSide(样式:BorderStyle.solid，颜色:Colors.black26)，)，颜色:新颜色(0xFFFAFAFA)，)，边距:新的EdgeInsets.only(顶部:0.0，底部:0.0)，子级:新行(mainAxisAlignment:MainAxisAlignment.start，crossAxisAlignment:CrossAxisAlignment.center，子代:< Widget> [新扩展(子级:新行(mainAxisAlignment:MainAxisAlignment.spaceBetween，子代:< Widget> [新容器(边距:新的EdgeInsets.only(左:16.0)，padding:new EdgeInsets.only(right:40.0，top:4.5，bottom:4.5)，子级:新行(子代:< Widget> [新容器(边距:new EdgeInsets.only(right:16.0)，子代:new Icon(Icons.brightness_1，颜色:黑色.尺寸:35.0，)，)，新文本(this.category)，]，))]，)，)]，)，);}} 

解决方案

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

这定义了每个子项的大小，您可以将其删除，然后构建器将根据每个子项的尺寸来计算其大小.删除要自动计算的 itemExtent .

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

ListView 代码应如下所示:

  body:新的ListView.builder(键:new Key(randomString(20))，//新itemBuilder:(BuildContext上下文，int索引)=>儿童[索引]，//itemExtent:128.0，itemCount:children.length，)， 

通过进行此更改，可以正确安装列表.

How can I decrease the size of items using the ListView.builder I already tried to tinker with everything in ItemCategory but the size remains the same.

Using the ListView the size is the smallest good according to this images below:

Using the Flutter - Strange ListView behavior after refresh code the items are well-sized, but by changing the ListView toListView.builder the size changes completely and the ItemCategory class is the same

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

解决方案

To work with the correct size simply change the value itemExtent: 128.0 to a smaller number such asitemExtent: 46.0

That defines the size of each child, you can remove it and the builder will calculate the size for each item based on its dimensions. Removing itemExtent to be automatically calculate.

The ListView also needs a key, because when updating to another list, if each list does not have its own key the list is mounted in the wrong way.

The ListView code should look like this:

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

By making this change the list is mounted correctly.

这篇关于Flutter-ListView.builder具有非常大的大小，并且不会更改的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！