扑朔迷离 - 单击时渲染新小部件

Question

标题基本上说明了一切。一个非常努力的问题...我有这个基本代码来创建我的应用的初始状态：

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Flutter Demo',
      theme: new ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: new MyHomePage(title: 'Some title'),
    );
  }
}
class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);
  final String title;
  @override
  _MyHomePageState createState() => new _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(title: new Text(config.title)),
      body: new Column(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        children: [
          new InputWidget(),
        ]
      ),
    );
  }
}

现在，当用户单击按钮时，如何渲染一个新的小部件？假设我想实例化另一个InputWidget。

谢谢

Answer 1

我希望我正确理解您的问题...

我认为要重点是您不应该想到"另一个"小部件 - 如果您将MyHomePage的内容从第一个孩子中更改为一个孩子，然后两个，那么您实际上并不是第一个孩子孩子，然后添加另一个孩子。您首先说"我想要一个孩子"，然后改变主意，说"我想要两个孩子"。

在您的代码中，您可以通过在_MyHomePageState中调用setState来执行此操作。Flutter会照顾一个保留第一个并添加第二个孩子。

import 'dart:core';
import 'package:flutter/material.dart';
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Flutter Demo',
      theme: new ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: new MyHomePage(title: 'Some title'),
    );
  }
}
class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);
  final String title;
  @override
  _MyHomePageState createState() => new _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
  int count = 1;
  @override
  Widget build(BuildContext context) {
    List<Widget> children = new List.generate(count, (int i) => new InputWidget(i));
    return new Scaffold(
        appBar: new AppBar(title: new Text(widget.title)),
        body: new Column(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: children
        ),
        floatingActionButton: new FloatingActionButton(
          child: new Icon(Icons.add),
          onPressed: () {
            setState(() {
              count = count + 1;
            });
          },
        )
    );
  }
}
class InputWidget extends StatelessWidget {
  final int index;
  InputWidget(this.index);
  @override
  Widget build(BuildContext context) {
    return new Text("InputWidget: " + index.toString());
  }
}

这是您的意思吗？

Answer 2

您的构建函数是" Just Code"，因此您可以使用

之类的东西动态地构建您传递到列的数组

var children = [];
children.add(new InputWidget());
if (_showAnother)
  children.add(new InputWidget());
...
  body: new Column(
    ...
    children: children,
...

... _showAnother是您在按钮时设置的某种布尔字段。