mobile – Flutter – 单击时渲染新的小部件

发布时间：2020-12-14 14:55:56 所属栏目：百科来源：网络整理

导读：标题基本上都说明了一切.一个非常高兴的问题……我有这个基本代码来创建我的应用程序的初始状态： class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return new MaterialApp( title: 'Flutter Demo',theme: new Theme

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

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.

谢谢

解决方法

我希望我能正确理解你的问题……

我认为主要的一点是你不应该想到“另一个”小部件 – 如果你改变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',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());
  }
}

这是你的意思吗？

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!