gpt4 book ai didi

dart - Flutter - 刷新后奇怪的 ListView 行为

转载 作者:IT王子 更新时间:2023-10-29 07:01:13 26 4
gpt4 key购买 nike

他们能帮我解决并理解为什么 ListView 在刷新后会出现奇怪的行为吗?

在下面的示例中,我创建了一个包含 24 个元素的列表,然后转到列表中的最后一项并点击图标刷新以更新列表。仅在更新后 ListView 不再显示所有元素。

并通过randomString

确保每个元素总是有不同的Key

enter image description here

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 = [];
var listaCategory;

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'}]
];
}

@override
Widget build(BuildContext context) {

List<Widget> buildListCategories(List list) {
this.listCategories = [];

for(var i in list) {
var category = i[0]['category'];

this.listCategories.add(
new ItemCategory(
key: new Key(randomString(20)),
category: category,
)
);
}
return this.listCategories;
}

this.listaCategory = buildListCategories(this.listaDB);

return new Scaffold(
appBar: new AppBar(
title: new Text('Categories'),
backgroundColor: blueAppBar,
actions: <Widget>[
new IconButton(
icon: new Icon(Icons.refresh),
onPressed: () {
setState(() {
this.listaCategory = buildListCategories(this.listaDB);
});
},
)
],
),
body: new ListView(
padding: new EdgeInsets.only(top: 8.0, right: 0.0, left: 0.0),
children: this.listaCategory
),
);
}
}

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

最佳答案

由于问题出在keyListView也需要一个key,因为更新到另一个列表时,如果每个列表都做不到没有自己的 key 列表以错误的方式挂载。

ListView 代码应如下所示:

body: new ListView(
key: new Key(randomString(20)), //new
padding: new EdgeInsets.only(top: 8.0, right: 0.0, left: 0.0),
children: this.listaCategory
),

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

关于dart - Flutter - 刷新后奇怪的 ListView 行为,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48662795/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com