Flutter-单击即可渲染新的小部件 [英] Flutter - Render new Widgets on click

问题描述

标题基本上说明了一切.一个非常nooby的问题...我有以下基本代码来创建我的应用的初始状态:

The title basically says it all. A very nooby question... I have this basic code to create the initial state of my app :

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.

Now, how can I render a new Widget when the user clicks on a button? Let's say I want to instantiate another InputWidget.

谢谢

推荐答案

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

I hope I understand your question correctly...

我认为要点是，您不应该想到另一个"小部件-如果您更改了MyHomePage的内容，而不是先生一个孩子，然后生了两个孩子，那么您实际上并不会保留第一个孩子，然后添加另一个孩子.您只需简单地说我想要一个孩子"，然后您改变主意并说我想要两个孩子".

I think the main point is that you should not think of "another" widget - if you change the content of MyHomePage from having first one child and then two you don't really keep the first child and then add another child. You simply first say "I want one child" and then you change your mind and say "I want two children".

在代码中，您可以通过调用_MyHomePageState内部的setState来执行此操作. Flutter负责保留第一个孩子并添加第二个孩子.

In your code you do this by calling setState inside _MyHomePageState. Flutter takes care of keeping the first and adding the second child.

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());
  }
}

这是您的意思吗?

这篇关于Flutter-单击即可渲染新的小部件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！