flutter 如何在PageView控件中通过两个下拉按钮在页面之间传递数据？

aydmsdu9 于 2023-03-04 发布在 Flutter

关注(0)|答案(1)|浏览(192)

我正在构建一个包含三个页面的入职功能：

页面0包含PageView Widget，并使用widgets.add()方法加载页面1和2
第1页是欢迎屏幕
第二页包含两个下拉按钮，应在onChanged之后将其值传递到第0页

第0页：

class Page0 extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => new _Page0State();
}

class _Page0State extends State<Page0> {
  late UserPreferencesArguments? args;

  int currentPage = 0;
  static const _kDuration = const Duration(milliseconds: 500);
  static const _kCurve = Curves.ease;
  PageController pageController = PageController();
  final globalScaffoldKey = GlobalKey<ScaffoldState>();

  List<Widget> widgets = [];

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

  init() async {
    widgets.add(Page1());
    widgets.add(Page2());
  }

  @override
  void dispose() {
    //pageController?.dispose();
    super.dispose();
  }

  @override
  void setState(fn) {
    if (mounted) super.setState(fn);
  }

  @override
  Widget build(BuildContext context) {
    args = ModalRoute.of(context)?.settings.arguments as UserPreferencesArguments?;

    return SafeArea(
      child: Scaffold(
        key: globalScaffoldKey,
        body: Stack(
          children: [
            Container(
              child: PageView(
                scrollDirection: Axis.horizontal,
                controller: pageController,
                children: widgets,
                onPageChanged: (i) {
                  currentPage = i;
                  setState(() {});
                },
              ),
            ),
            Positioned(
              child: Container(
                child: ElevatedButton(
                  style: ElevatedButton.styleFrom(
                    backgroundColor: Colors.black,
                    shadowColor: Colors.grey,
                  ),
                  onPressed: () {
                    if (currentPage == 1) {
                      updateAttributes(args?.aaa, args?.bbb);
                      Navigator.pushReplacementNamed(context, '/homepage');
                    } else {
                      pageController.nextPage(duration: _kDuration, curve: _kCurve);
                    }
                  },
                  child: Text(currentPage == 1 ? 'Finish' : "Next",),
                ),
              ),
            ),
          ],
        )
      ),
    );
  }

  updateAttributes(aaa, bbb) async {
    debugPrint('devid:  ${aaa}');
    debugPrint('devid:  ${bbb}');
  }

}

第二页：

class Page2 extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => new _Page2State();
}

class _Page2State extends State<Page2> {

  String aaaImportValue = "";
  String? _valAAA;
  List _aaaList = ["1", "2" ];

  String bbbImportValue = "";
  String? _valBBB;
  List _bbbList = ["3", "4" ];

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

  init() async {}

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
                    Container(
                      child: DropdownButton<String>(
                        hint: Text("Select").tr(),
                        value: _valAAA,
                        items: _aaaList.map((value) {
                          return DropdownMenuItem<String>(
                            child: Text(value),
                            value: value,
                          );
                        }).toList(),
                        onChanged: (String? value) {
                          setState(() {
                              _valAAA = value!;
                          });
                        },
                      ),
                    ),
                    Container(
                      child: DropdownButton<String>(
                        hint: Text("Select").tr(),
                        value: _valBBB,
                        items: _bbbList.map((value) {
                          return DropdownMenuItem<String>(
                            child: Text(value),
                            value: value,
                          );
                        }).toList(),
                        onChanged: (String? value) {
                          setState(() {
                            _valBBB = value!;
                          });
                        },
                      ),
                    ),
      ],
    );
  }
}

我试着以这种方式传递下拉列表值，但这只是导航到Page0：

onChanged: (String? value) {
    setState(() {
         _valBBB = value!;
         if(_valBBB != null){
             Navigator.pushNamed(context, "/Page0",
             arguments: UserPreferencesArguments(_valAAA, _valBBB));
         }
    });
},

flutter

来源：https://stackoverflow.com/questions/75608602/how-to-pass-data-from-two-dropdown-buttons-between-pages-in-pageview-widget

1条答案

按热度按时间

czq61nw11#

您可以在Page2上使用回调方法。

class Page2 extends StatefulWidget {
  final Function(String? value1, String? value2) callback;
  const Page2({
    Key? key,
    required this.callback,
  }) : super(key: key);

  @override
  State<StatefulWidget> createState() => _Page2State();
}

现在值已更改，请调用

onChanged: (String? value) {
  setState(() {
    _valAAA = value!;
  });

  widget.callback(_valAAA, _valBBB);
},

而且你会得到价值

init() async {
  widgets.add(Page1());
  widgets.add(Page2(
    callback: (value1, value2) {
      
    },
  ));
}

测试片段

class Page0 extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => new _Page0State();
}

class _Page0State extends State<Page0> {
  int currentPage = 0;

  PageController pageController = PageController();
  final globalScaffoldKey = GlobalKey<ScaffoldState>();

  List<Widget> widgets = [];

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

  String? value1, value2;

  init() async {
    widgets.add(Text("Page1"));
    widgets.add(Page2(
      callback: (v1, v2) {
        value1 = v1;
        value2 = v2;
        log("value 1 $value1 value2 $value2");
      },
    ));
  }

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
          key: globalScaffoldKey,
          body: Stack(
            children: [
              PageView(
                scrollDirection: Axis.horizontal,
                controller: pageController,
                children: widgets,
                onPageChanged: (i) {
                  currentPage = i;
                  setState(() {});
                },
              ),
              Center(child: Text("v1 $value1, v2 $value2"))
            ],
          )),
    );
  }
}

class Page2 extends StatefulWidget {
  final Function(String? value1, String? value2) callback;
  const Page2({
    Key? key,
    required this.callback,
  }) : super(key: key);

  @override
  State<StatefulWidget> createState() => _Page2State();
}

class _Page2State extends State<Page2> {
  String aaaImportValue = "";
  String? _valAAA;
  List _aaaList = ["1", "2"];

  String bbbImportValue = "";
  String? _valBBB;
  List _bbbList = ["3", "4"];

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

  init() async {}

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Container(
          child: DropdownButton<String>(
            hint: Text("Select"),
            value: _valAAA,
            items: _aaaList.map((value) {
              return DropdownMenuItem<String>(
                child: Text(value),
                value: value,
              );
            }).toList(),
            onChanged: (String? value) {
              setState(() {
                _valAAA = value!;
              });

              widget.callback(_valAAA, _valBBB);
            },
          ),
        ),
        Container(
          child: DropdownButton<String>(
            hint: Text("Select"),
            value: _valBBB,
            items: _bbbList.map((value) {
              return DropdownMenuItem<String>(
                child: Text(value),
                value: value,
              );
            }).toList(),
            onChanged: (String? value) {
              setState(() {
                _valBBB = value!;
              });
            },
          ),
        ),
      ],
    );
  }
}

赞(0）回复(0）举报 2023-03-04

我来回答

flutter 如何在PageView控件中通过两个下拉按钮在页面之间传递数据？

1条答案

相关问题

热门标签

最新问答