Flutter - setState 未更新内部自定义状态小部件

Question

我创建了一个 Custom Segments 小部件，它根据列表创建多个 TABS。我正在从 homepage.dart 更新 selectionsList 但我的段仍然没有根据更改的 selectionsList

更新运行时

Segments.dart(创建 Cupertino 选项卡的自定义 SegmentWidget)

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

class SegmentsWidget extends StatefulWidget {
  @override
  _SegmentsWidgetState createState() => _SegmentsWidgetState();

  final List selectionsList;
  final ValueChanged<int> onSelectTab;
  final VoidCallback onTap;
  final int selectedValue;

  SegmentsWidget(
      {this.selectionsList, this.onSelectTab, this.onTap, this.selectedValue});
}

class _SegmentsWidgetState extends State<SegmentsWidget> {
  Map<int, Widget> tabWidget = Map<int, Widget>();
  int selectedTab = 0;


  @override
  void initState() {
    super.initState();
    print("INit State ${widget.selectionsList}");
    setState(() {
      widget.selectionsList.asMap().forEach((index, value) {
        tabWidget.addAll({
          index: Container(
              height: 40,
              child: Center(
                child: Text(
                  widget.selectionsList[index],
                  style: TextStyle(fontFamily: 'Exo2', fontSize: 12.0),
                ),
              ))
        });
      });
    });
  }

  @override
  void didUpdateWidget(SegmentsWidget oldWidget) {
    super.didUpdateWidget(oldWidget);
    print("Did update");
  }

  @override
  Widget build(BuildContext context) {

    return Container(
      child: Row(
        children: <Widget>[
          Expanded(
            child: SizedBox(
              width: MediaQuery.of(context).size.width,
              child: CupertinoSegmentedControl<int>(
                padding: EdgeInsets.symmetric(vertical: 8),
                children: tabWidget,
                onValueChanged: (int index) {
                  setState(() {
                    selectedTab = index;
                  });
                  widget.onSelectTab(index);
                },
                groupValue: widget.selectedValue ?? selectedTab,
              ),
            ),
          )
        ],
      ),
    );
  }
}

HomePage.dart

在主页上，我正在更新 selection 数组，但我的段仍然没有根据 selectionList 更新。

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {

  List<String> selection;
  int selectedTab = -1;

  @override
  void initState() {
    super.initState();
    selection = ["A", "B"];
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("Dynamic Segments")),
      body: Container(
        child: Column(
          children: <Widget>[

            SegmentsWidget(
              selectionsList: selection,
              onSelectTab: (selectTab) {
                setState(() {
                  selectedTab = selectTab;
                });
              },
            ),

            RaisedButton(child: Text("AB"),onPressed: (){
              setState(() {
                selection = ["A", "B"];
              });

            }),


            RaisedButton(child: Text("ABC"),onPressed: (){
              setState(() {
                selection = ["A", "B", "C"];
              });

            }),

          RaisedButton(child: Text("ABCD"),onPressed: (){
            setState(() {
              selection = ["A", "B", "C","D"];
            });

      })
          ],
        ),
      ),
    );
  }
}

我假设 Segment Widget 的 initState 只调用了一次。我什至在 didUpdateWidget 中尝试过，但仍然没有更新标签页。

问题:如何从另一个有状态小部件更新我的自定义小部件中提到的 tabWidgets？

Answer 1

我更改了部分代码。不要在 initState() 函数中调用您的代码(需要在 setState 上再次调用)，而是使用您自己的方法在小部件内调用您的代码。

请参阅代码下面的 getTabChilds() 函数。

class _SegmentsWidgetState extends State<SegmentsWidget> {
  Map<int, Widget> tabWidget = Map<int, Widget>();
  int selectedTab = 0;

  @override
  void initState() {
    super.initState();
    print("INit State ${widget.selectionsList}");
  }

  @override
  void didUpdateWidget(SegmentsWidget oldWidget) {
    super.didUpdateWidget(oldWidget);
    print("Did update");
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Row(
        children: <Widget>[
          Expanded(
            child: SizedBox(
              width: MediaQuery.of(context).size.width,
              child: CupertinoSegmentedControl<int>(
                padding: EdgeInsets.symmetric(vertical: 8),
                children: getTabChilds(),
                onValueChanged: (int index) {
                  setState(() {
                    selectedTab = index;
                  });
                  widget.onSelectTab(index);
                },
                groupValue: widget.selectedValue ?? selectedTab,
              ),
            ),
          )
        ],
      ),
    );
  }

  Map<int, Widget> getTabChilds() {
    tabWidget = Map<int, Widget>();
    widget.selectionsList.asMap().forEach((index, value) {
      tabWidget.addAll({
        index: Container(
            height: 40,
            child: Center(
              child: Text(
                widget.selectionsList[index],
                style: TextStyle(fontFamily: 'Exo2', fontSize: 12.0),
              ),
            ))
      });
    });
    return tabWidget;
  }
}

它已经过测试并且工作正常。