Flutter - 单击时渲染新的小部件

Posted 2023-02-23

【中文标题】Flutter - 单击时渲染新的小部件

【英文标题】：Flutter - Render new Widgets on click

【发布时间】：2017-09-25 17:18:26

【问题描述】：

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

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

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

谢谢

【参考方案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());
  

这是你的意思吗？

【讨论】：

那么，这是用户可以通过单击按钮在页面之间导航的方式，还是有其他方法？

我认为为此您应该查看MaterialApp 的onGenerateRoute 属性-存储库中的图库示例应用程序有一些示例。但我对 Flutter 也很陌生！

我会开一个新帖子，一有发现就会通知你。谢谢:)

完美答案非常感谢！！

【参考方案2】：

您的构建函数是“只是代码”，因此您可以使用类似的东西动态构建传递给列的数组

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

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

【讨论】：

了解，但在尝试上述代码时显示此错误:: error:: Type 'List' should be 'List' to implement expected type 'List'上述错误的解决方案：而不是将节点名称定义为 List

的变量