Flutter-动态添加需要更改状态的小部件 [英] Flutter - Dynamically adding widget that needs to change state as well

问题描述

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

What I want to achieve is explained below:- To show several widgets by clicking a button. The dynamically displayed widgets are basically FlatButtons with Icons as child. So when I click these buttons, I want the icon to change. However, on testing it - I found that their state doesn't change. Below is a sample code

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

推荐答案

这可能对您有帮助

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

这篇关于Flutter-动态添加需要更改状态的小部件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！