flutter - 来自另一个类的Flutter调用集状态

Question

因此，我建立了一个页面，其中有一些将是动态选项的按钮。当您选择该选项时，它会突出显示，将小部件添加到列表中，然后我希望它在页面顶部显示该列表。

我可以在 Debug模式下查看列表，所以我知道当按钮被按下时，它将被添加到列表中。

但是，没有发生的是页面的状态没有刷新，因此用户看不见。

如何使按钮同时设置其他小部件的状态以查看列表？





所以这是第一页。该页面具有将代码传递给Tag的代码，当按下tag并将项目添加到digitalHash List中时，该列表位于第一个展开的位置

已添加评论

    class Digital extends StatefulWidget {
      @override
      _DigitalState createState() => _DigitalState();
    }

    class _DigitalState extends State<Digital> {
      final postRefresh = ChangeNotifier();

      bool digitalSelected = false;
      List digitalHash = new List();

      @override
      void initState() {
        super.initState();
      }

      Widget build(BuildContext context) {
        return Scaffold(
          backgroundColor: Color(0xff0E0E0F),
          appBar: AppBar(
            iconTheme: IconThemeData(
              color: Color(0xffff9900),
            ),
            centerTitle: true,
            backgroundColor: Colors.black,
            title: Row(
              mainAxisAlignment: MainAxisAlignment.center,
              mainAxisSize: MainAxisSize.min,
              children: <Widget>[
                Text(
                  "#", style: TextStyle(fontSize: 25, color: Color(0xffff9900), fontFamily: 'Dokyo'),
                ),
                Text("digital", style: TextStyle(color: Colors.white, fontFamily: 'Dokyo'),)
              ],
            ),
          ),
          body: Column(
            children: <Widget>[
              Expanded(
                flex: 3,
                child: Container(
                  child: Row(
                    children: <Widget>[
//this is where the list is being displayed
                    for (var digitalHashs in digitalHash) Text(digitalHashs, style: TextStyle(color: Colors.white, fontSize: 20),),
                    ],
                  ),
                  color: Colors.blue
                ),
              ),
              Expanded(
                flex: 6,
                child: Container(
                  color: Colors.black,
                  child: ListView(
                    padding: EdgeInsets.fromLTRB(25, 5, 25, 5),
                    children: <Widget>[
                      Tag(
                        tag: "#Digital",
                        isSelected: digitalSelected,
                        list: digitalHash,
                      ),
                    ],
                  ),
                ),
              ),

我希望能够重用Tag ...这是Tag元素

class Tag extends StatefulWidget {
  final String tag;
  bool isSelected;
  List list;
  Widget page;


  Tag({Key key, @required this.tag, @required this.isSelected, this.list, this.page}) : super(key: key);

  @override
  _TagState createState() => _TagState();
}

class _TagState extends State<Tag> with SingleTickerProviderStateMixin{
  AnimationController _animationController;

  @override
  void initState() {
    super.initState();
    _animationController =
        AnimationController(vsync: this, duration: Duration(milliseconds: 300));
  }

  @override
  void dispose() {
    super.dispose();
    _animationController.dispose();
  }

  Widget build(BuildContext context) {
    return Container(
      margin: EdgeInsets.fromLTRB(0, 5, 0, 5),
      height: 50,
      decoration: BoxDecoration(
          color: widget.isSelected ? Color(0xffff9900) : Colors.black,
          border: Border.all(color: Colors.white),
          borderRadius: BorderRadius.circular(10)),
      child: InkWell(
        onTap: () {
          _handleOnPressed();
        },
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: <Widget>[
            Container(
                padding: EdgeInsets.fromLTRB(20, 0, 0, 0),
                alignment: Alignment.centerLeft,
                child: Text(
                  widget.tag,
                  style: TextStyle(
                      fontSize: 20, color: widget.isSelected ? Colors.black : Colors.white, fontFamily: 'Dokyo'),
                )),
            Container(
                padding: EdgeInsets.fromLTRB(0, 0, 20, 0),
                child: AnimatedIcon(
                  icon: AnimatedIcons.home_menu,
                  progress: _animationController,
                  color: widget.isSelected ? Colors.black : Colors.white,
                ))
          ],
        ),
      ),
    );
  }

  void _handleOnPressed() {
    setState(() {
      widget.isSelected = !widget.isSelected;
      widget.isSelected
          ? _animationController.forward()
          : _animationController.reverse();
      widget.isSelected ? widget.list.add(widget.tag) : widget.list.remove(widget.tag);
      print(widget.list);
    });
  }
}

当我按下标签时，数字哈希列表没有更新就没有错误。但是标签确实突出显示。

我只是想更新一个扩展的部分，以便它显示列表。

Answer 1

您可以在下面复制粘贴运行完整代码
我还提供了工作演示
在DigitalStage中添加两个用于添加/删除列表的功能
使用final key = new GlobalKey<DigitalState>();可以从Tag调用这两个函数

程式码片段

final key = new GlobalKey<DigitalState>();

class Digital extends StatefulWidget {
  Digital({ Key key }) : super(key: key);
...
    void add(String tag) {
    setState(() {
      digitalHash.add(tag);
    });

  }

  void remove(String tag) {
    setState(() {
      digitalHash.remove(tag);
    });

  }
...
widget.isSelected
          ?  key.currentState.add(widget.tag)
          : key.currentState.remove(widget.tag);

工作演示



完整的代码

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        // This is the theme of your application.
        //
        // Try running your application with "flutter run". You'll see the
        // application has a blue toolbar. Then, without quitting the app, try
        // changing the primarySwatch below to Colors.green and then invoke
        // "hot reload" (press "r" in the console where you ran "flutter run",
        // or simply save your changes to "hot reload" in a Flutter IDE).
        // Notice that the counter didn't reset back to zero; the application
        // is not restarted.
        primarySwatch: Colors.blue,
      ),
      home: Digital(key: key),
    );
  }
}


final key = new GlobalKey<DigitalState>();

class Digital extends StatefulWidget {
  Digital({ Key key }) : super(key: key);

  @override
  DigitalState createState() => DigitalState();
}

class DigitalState extends State<Digital> {
  final postRefresh = ChangeNotifier();

  bool digitalSelected = false;
  List digitalHash = new List();

  void add(String tag) {
    setState(() {
      digitalHash.add(tag);
    });

  }

  void remove(String tag) {
    setState(() {
      digitalHash.remove(tag);
    });

  }

  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        //key: key,
        backgroundColor: Color(0xff0E0E0F),
        appBar: AppBar(
          iconTheme: IconThemeData(
            color: Color(0xffff9900),
          ),
          centerTitle: true,
          backgroundColor: Colors.black,
          title: Row(
            mainAxisAlignment: MainAxisAlignment.center,
            mainAxisSize: MainAxisSize.min,
            children: <Widget>[
              Text(
                "#",
                style: TextStyle(
                    fontSize: 25,
                    color: Color(0xffff9900),
                    fontFamily: 'Dokyo'),
              ),
              Text(
                "digital",
                style: TextStyle(color: Colors.white, fontFamily: 'Dokyo'),
              )
            ],
          ),
        ),
        body: Column(children: <Widget>[
          Expanded(
            flex: 3,
            child: Container(
                child: Row(
                  children: <Widget>[
//this is where the list is being displayed
                    for (var digitalHashs in digitalHash)
                      Text(
                        digitalHashs,
                        style: TextStyle(color: Colors.white, fontSize: 20),
                      ),
                  ],
                ),
                color: Colors.blue),
          ),
          Expanded(
            flex: 6,
            child: Container(
              color: Colors.black,
              child: ListView(
                padding: EdgeInsets.fromLTRB(25, 5, 25, 5),
                children: <Widget>[
                  Tag(
                    tag: "#Digital",
                    isSelected: digitalSelected,
                    list: digitalHash,
                  ),
                ],
              ),
            ),
          )
        ]));
  }
}

class Tag extends StatefulWidget {
  final String tag;
  bool isSelected;
  List list;
  Widget page;

  Tag(
      {Key key,
      @required this.tag,
      @required this.isSelected,
      this.list,
      this.page})
      : super(key: key);

  @override
  _TagState createState() => _TagState();
}

class _TagState extends State<Tag> with SingleTickerProviderStateMixin {
  AnimationController _animationController;

  @override
  void initState() {
    super.initState();
    _animationController =
        AnimationController(vsync: this, duration: Duration(milliseconds: 300));
  }

  @override
  void dispose() {
    super.dispose();
    _animationController.dispose();
  }

  Widget build(BuildContext context) {
    return Container(
      margin: EdgeInsets.fromLTRB(0, 5, 0, 5),
      height: 50,
      decoration: BoxDecoration(
          color: widget.isSelected ? Color(0xffff9900) : Colors.black,
          border: Border.all(color: Colors.white),
          borderRadius: BorderRadius.circular(10)),
      child: InkWell(
        onTap: () {
          _handleOnPressed();
        },
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: <Widget>[
            Container(
                padding: EdgeInsets.fromLTRB(20, 0, 0, 0),
                alignment: Alignment.centerLeft,
                child: Text(
                  widget.tag,
                  style: TextStyle(
                      fontSize: 20,
                      color: widget.isSelected ? Colors.black : Colors.white,
                      fontFamily: 'Dokyo'),
                )),
            Container(
                padding: EdgeInsets.fromLTRB(0, 0, 20, 0),
                child: AnimatedIcon(
                  icon: AnimatedIcons.home_menu,
                  progress: _animationController,
                  color: widget.isSelected ? Colors.black : Colors.white,
                ))
          ],
        ),
      ),
    );
  }

  void _handleOnPressed() {
    setState(() {
      widget.isSelected = !widget.isSelected;
      widget.isSelected
          ? _animationController.forward()
          : _animationController.reverse();
      widget.isSelected
          ?  key.currentState.add(widget.tag)
          : key.currentState.remove(widget.tag);
      print(widget.list);
    });
  }
}