flutter - 无法使用外部小部件设置状态

Question

我正在使用 flutter 并尝试在点击图标时更改图标的状态(切换图标)。如果一切都在同一个类(class)，这很好用。但是我在重复的页面上重复了小部件的一部分，因此我已经将该小部件移到了另一个类中。现在，当我尝试通过传入一个函数来设置状态时，基于调试步骤，看起来它工作正常但状态保持不变(图标没有改变)。我能知道我做错了什么吗？谢谢。

这是我从另一个类调用小部件并传入函数以设置状态的类。

class _MyPageState extends State<MyPage> {
  IconData heartStatus = FontAwesomeIcons.heart;

  void setFav(){
    print('clicked');
    setState(() {
      if (heartStatus == FontAwesomeIcons.heart) {
        heartStatus = FontAwesomeIcons.solidHeart;
      } else {
        heartStatus = FontAwesomeIcons.heart;
      }
    });
  }

  @override
  Widget build(BuildContext context) {

    Page page = new Page();
    PageController controller = PageController();

    return Scaffold(
      backgroundColor: Colors.blue,
      body: SafeArea(
        child: PageView(
          children: <Widget>[
            // this is the external widget repeated 3 times. Each time passing in setFav which is the setState function. 
            page.getPageData("text 1", "", setFav),
            page.getPageData("text 2", "", setFav),
            page.getPageData("text 3", "", setFav),
          ],
        ),
      ),
    );
  }
}

这是通过 page.getPageData 提供小部件的类(我已经删除了很多嵌套小部件以专注于对这个设置状态问题很重要的小部件，即图标)。

class Page{

  Widget getPageData(String question, String answer, Function setFav){
    IconData heartStatus = FontAwesomeIcons.heart;
    return Padding(
      padding: const EdgeInsets.all(16.0),
      child: Column(
        children: <Widget>[
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: <Widget>[
              GestureDetector(
                child: Icon(heartStatus),
                onTap: () {
                  setFav();
                },
              ),
              GestureDetector(
                child: Icon(FontAwesomeIcons.shareAlt),
                onTap: () {
                  print('shared');
                },
              ),
            ],
          ),
        ],
      ),
    );
  }
}

Answer 1

您正在提供 setFav 方法，该方法调用 setState 来更改 MyPage 小部件中的图标。

我认为您的目标是更改从 getPageData 方法返回的小部件中的图标。

使用 setFav 方法更改 MyPage 中的图标后，您没有使用此图标。 PageView 中的小部件未使用该图标。

我强烈建议您使用小部件，而不是函数。 https://iirokrankka.com/2018/12/11/splitting-widgets-to-methods-performance-antipattern/

class Page extends StatelessWidget {
  Page({this.changeIcon, this.heartStatus});

  Function changeIcon;
  IconData heartStatus;
  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(16.0),
      child: Column(
        children: <Widget>[
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: <Widget>[
              GestureDetector(
                child: Icon(heartStatus),
                onTap: () {
                  changeIcon();
                },
              ),
              GestureDetector(
                child: Icon(FontAwesomeIcons.shareAlt),
                onTap: () {
                  print('shared');
                },
              ),
            ],
          ),
        ],
      ),
    );
  }
}

...

child: PageView(
          children: <Widget>[
            // this is the external widget repeated 3 times. Each time passing in setFav which is the setState function. 
            Page(heartStatus,setFav);
            Page(heartStatus,setFav);
            Page(heartStatus,setFav);
          ],
        ),