Question

当前，我正在使用一列在屏幕上显示项目列表，但是一旦列表变大，就无法再显示它。这就是为什么我要使用ListView而不是列。我使用按钮将新的“卡”添加到列表中，并使用setState重建所有内容以显示新添加的卡。与该列配合正常。

我的问题：当我实现ListView而不是列时，使用“添加按钮”添加到列表中的项目将被添加到列表中，但是UI不会更新，新项目也不会显示在屏幕上。

//Here I use a column, but I don´t know how to implent a ListView
//to get the same result/functionality

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}




class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {

  MyToDoCards myToDoCardsList = MyToDoCards();

  void addNewContainer() {
    setState(() {
      myToDoCardsList.toDoCards.add(
        Container(
          margin: EdgeInsets.only(top: 15.0),
          height: MediaQuery.of(context).size.height * 0.05,
          color: Colors.blue,
        ),);
    });
    print(myToDoCardsList.toDoCards);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      bottomNavigationBar: BottomAppBar(
        child: Container(
          height: 50.0,
        ),
      ),
      body: Center(
        child: Container(
          width: MediaQuery.of(context).size.width * 0.8,
          child: Column(
            children: myToDoCardsList.toDoCards,
          )
        ),
      ),
      floatingActionButton: FloatingActionButton(
        backgroundColor: Colors.yellow,
        onPressed: () {addNewContainer();},
        child: Icon(
          Icons.add,
          color: Colors.black,
        ),
      ),
      floatingActionButtonLocation: 
FloatingActionButtonLocation.centerDocked,
    );
  }
}





class MyToDoCards {

  List<Widget> toDoCards = [
    Container(
      margin: EdgeInsets.only(top: 15.0),
      height: 40.0,
      color: Colors.blue,
    ),
  ];
}

Answer 1

为什么要使用类来存储小部件列表？我不会说这是一个好方法。但是根据您自己的代码，您可以将Colum替换为ListView，请参见完整的实现：

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  MyToDoCards myToDoCardsList = MyToDoCards();

  void addNewContainer() {
    setState(() {
      myToDoCardsList.toDoCards.add(
        Container(
          margin: EdgeInsets.only(top: 15.0),
          height: MediaQuery.of(context).size.height * 0.05,
          color: Colors.blue,
        ),
      );
    });
    print(myToDoCardsList.toDoCards);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      bottomNavigationBar: BottomAppBar(
        child: Container(
          height: 50.0,
        ),
      ),
      body: Center(
        child: Container(
          width: MediaQuery.of(context).size.width * 0.8,
          child: ListView.builder(
            itemCount: myToDoCardsList.toDoCards.length,
            itemBuilder: (BuildContext context, int index) {
              return myToDoCardsList.toDoCards[index];
            },
          ),
        ),
      ),
      floatingActionButton: FloatingActionButton(
        backgroundColor: Colors.yellow,
        onPressed: () {
          addNewContainer();
        },
        child: Icon(
          Icons.add,
          color: Colors.black,
        ),
      ),
      floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
    );
  }
}

class MyToDoCards {
  List<Widget> toDoCards = [
    Container(
      margin: EdgeInsets.only(top: 15.0),
      height: 40.0,
      color: Colors.blue,
    ),
  ];
}

我只将列部分更改为此：

child: ListView.builder(
  itemCount: myToDoCardsList.toDoCards.length,
  itemBuilder: (BuildContext context, int index) {
    return myToDoCardsList.toDoCards[index];
  },
),

使用ListView中的构建器构造函数，您可以将相应的窗口小部件返回到列表中的特定索引。要告诉列表应该调用builder方法的次数，可以传递itemCount参数。

结果将是您期望的结果。

将新项目添加到ListView时如何更新UI

1 个答案: