Flutter-визуализация новых виджетов по клику

название в основном говорит все. Очень применил шаблон основной вопрос... У меня есть этот базовый код для создания начального состояния моего приложения:

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.

спасибо

6
dart flutter mobile

2 ответов

надеюсь я правильно понял ваш вопрос...

Я думаю, что главное заключается в том, что вы не должны думать о "другом" виджете - если вы измените содержимое MyHomePage от рождения сначала одного ребенка, а затем двух вы на самом деле keep первый ребенок, а потом добавить ребенок. Вы просто сначала говорите: "Я хочу одного ребенка", а затем передумываете и говорите:"Я хочу двух детей".

в вашем коде вы делаете это путем вызова setState внутри _MyHomePageState. 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());
  }
}

это то, что вы имели в виду?

6

ваша функция сборки - "просто код", поэтому вы можете динамически создавать массив, который вы передаете столбцу, используя что-то вроде

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

...где _showAnother - это своего рода поле bool, которое вы устанавливаете при нажатии кнопки.

2