flutter - Flutter中如何根据需求动态插入和移除widget？

Question

这个问题很常见。但是，我尝试通过在点击按钮时将 Container 添加到 Column 来模拟事件。但是，容器未添加到列中或未在屏幕上呈现。除此之外，setState 方法会显示一条警告，指出它没有被引用。

这是代码

import 'package:flutter/material.dart';
import 'package:focus7/Configurations/size_config.dart';

class Demo2 extends StatefulWidget {
  @override
  _Demo2State createState() => _Demo2State();
}

class _Demo2State extends State<Demo2> {
  List<Widget> containersList = [
    Container(
      color: Colors.amberAccent,
      height: 100,
      width: 200,
    ),
    Container(
      color: Colors.red,
      height: 100,
      width: 200,
    ),
    Container(
      color: Colors.brown,
      height: 100,
      width: 200,
    ),
    Container(
      color: Colors.green,
      height: 100,
      width: 200,
    ),
  ];
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: SafeArea(
      child: Column(children: <Widget>[
        ...containersList,
        RaisedButton(
          onPressed: () {
            setState() => containersList.add(Container(
                  color: Colors.lightBlue,
                  height: 100,
                  width: 200,
                ));
          },
          child: Text("click"),
        )
      ]),
    ));
  }
}

这是输出：

标签： flutterflutter-layoutflutter-animationflutter-test

Answer 1

问题是你正在使用箭头函数，这意味着你在右侧写的任何东西都会返回一些东西，你没有将它分配给任何不是实际要求的变量，这就是它显示错误的原因。

在解决您的问题时，将您的 setState 替换为以下一个。

setState(() {
              containersList.add(Container(
                color: Colors.lightBlue,
                height: 100,
                width: 200,
              ));
            });