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

Question

我要实现的目标解释如下：-通过单击一个按钮显示几个小部件。动态显示的小部件基本上是带有图标作为子元素的FlatButtons。因此，当我单击这些按钮时，我希望更改图标。但是，在测试时-我发现它们的状态没有改变。下面是示例代码

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,
        ],
      ),
    );
  }
}

Answer 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;
          });
        },
      ),
    );
  }
}