Flutter - 动态添加需要更改状态的小部件答案

【问题标题】：Flutter - Dynamically adding widget that needs to change state as wellFlutter - 动态添加需要更改状态的小部件
【发布时间】：2019-12-20 17:28:56
【问题描述】：

我想要达到的目标解释如下：- 通过单击按钮显示多个小部件。动态显示的小部件基本上是 FlatButtons 与 Icons 作为孩子。所以当我点击这些按钮时，我想要改变图标。但是，在对其进行测试时-我发现它们的状态没有改变。下面是示例代码

import 'package:flutter/material.dart';

class Test extends StatefulWidget {
  @override
  _TestState createState() => _TestState();
}



class _TestState extends State<Test> {

  IconData icon;
  List<Widget> w;

  void initState() {
    super.initState();
    w = List();
  }

  Widget getWidget() {
    icon = Icons.play_arrow;
    return Center(
      child: FlatButton(
        child: Icon(
          icon,
          color: Colors.black,
        ),
        onPressed: () {
          setState(() {
            icon = Icons.pause;
          });
        },
      )
    );
  }

  @override
  Widget build(BuildContext context) {
    //w = Widget();
    return Scaffold(
      appBar: AppBar(
        title: Text('Speech Aid'),
      ),
      body: Column(
        children: <Widget>[
          Center(
            child: FlatButton(
              child: Text('Text'),
              onPressed: () {
                setState(() {
                  List<Widget> w1 = List();
                  w1.add(getWidget());
                  w = w1;
                });
              },
            )
          ),
          ...w,
        ],
      ),
    );
  }
}

【问题讨论】：

标签： flutter dart flutter-layout

【解决方案1】：

这可能对你有帮助

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Test(),
    );
  }
}

class Test extends StatefulWidget {
  @override
  _TestState createState() => _TestState();
}

class _TestState extends State<Test> {
  List<Widget> playButtonList;

  void initState() {
    playButtonList = <Widget>[];
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Speech Aid'),
      ),
      body: Column(
        crossAxisAlignment: CrossAxisAlignment.center,
        children: <Widget>[
          FlatButton(
            child: Text('Add Play Button'),
            color: Colors.black26,
            onPressed: () {
              setState(() {
                playButtonList.add(PlayButton());
              });
            },
          ),
          Expanded(
            child: ListView.builder(
              itemCount: playButtonList.length,
              itemBuilder: (context, index) => playButtonList[index],
            ),
          )
        ],
      ),
    );
  }
}

class PlayButton extends StatefulWidget {
  @override
  _PlayButtonState createState() => _PlayButtonState();
}

class _PlayButtonState extends State<PlayButton> {
  IconData icon;

  @override
  void initState() {
    icon = Icons.play_arrow;
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Center(
      child: FlatButton(
        child: Icon(icon),
        onPressed: () {
          setState(() {
            if (icon == Icons.play_arrow)
              icon = Icons.pause;
            else
              icon = Icons.play_arrow;
          });
        },
      ),
    );
  }
}

【讨论】：