web-dev-qa-db-ja.com

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をインスタンス化するとします。

ありがとう

mobiledartflutter
8
OhMad

私はあなたの質問を正しく理解することを願っています...

重要な点は、「別の」ウィジェットについて考えるべきではないということだと思います。MyHomePageのコンテンツを、最初に1つ、次に2つの子を持つように変更した場合、実際にはそうではありませんkeep最初の子、次に別の子を追加子。最初に「子供が1人欲しい」と言ってから、気が変わって「子供が2人欲しい」と言うだけです。

コードでは、_MyHomePageState内でsetStateを呼び出すことでこれを行います。 Flutterは、最初の子を保持し、2番目の子を追加します。

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

これはあなたが意味したことですか？

8
david.mihola

ビルド関数は「単なるコード」であるため、次のようなものを使用して、列に渡す配列を動的にビルドできます。

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

...どこ _showAnotherは、ボタンをタップしたときに設定するブールフィールドの一種です。

2
Ian Hickson