Flutter：使用带有 AnimatedSwitcher 的 setstate 时未重建小部件

Question

我对 Flutter 中的 RadioListTile 和 Radio 有疑问。 将 RadioListTile 与 AnimatedSwitcher 一起使用时，无法 select 单选按钮。

错误在于这一行：

 Widget pageTest;

 @override
 initState() {
    super.initState();
    pageTest = thirdSurveyPage();
  }

 @override
 Widget build(BuildContext context) {
 return Scaffold(
   body: AnimatedSwitcher(
       duration: Duration(milliseconds: 800), child: pagetest));
 }

如果我这样做：

  @override
  Widget build(BuildContext context) {
  return Scaffold(
    body: AnimatedSwitcher(
        duration: Duration(milliseconds: 800), child: thirdSurveyPage()));
  }

单选按钮的选择有效。 我需要使用第一种方法才能使用 AnimatedSwitcher 小部件，代码片段只显示三个片段中的一个片段，因为其他两个工作正常。

我将其缩小到小部件“thirdSurveyPage”，显然在使用第一种方法时没有重建，但我不知道如何修复它。

这是代码笔： https://codepen.io/mstachalski/pen/ZEbOPNa

先感谢您。

Answer 1

您可以在下面复制粘贴运行完整代码
thirdSurveyPage()是 function，所以可以使用Function pageTest而不是Widget pageTest

代码片段

Function pageTest;

  @override
  initState() {
    super.initState();
    pageTest = thirdSurveyPage;
  }

@override
  Widget build(BuildContext context) {
    print("build");
    return Scaffold(
        body: AnimatedSwitcher(
            duration: Duration(milliseconds: 800), child: pageTest()));
  }  

工作演示

完整代码

import 'package:flutter/material.dart';

void main() {
  runApp(
    MaterialApp(
      home: MyWidget(),
    ),
  );
}

class MyWidget extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return _SurveyPageState1();
  }
}

class _SurveyPageState1 extends State<MyWidget> {
  int rating1 = 0;
  int rating2 = 0;
  int rating3 = 0;
  int rating4 = 0;
  int rating5 = 0;
  String _answerQ6 =
      "Was andere Besucher vermutlich denken, wenn ich mich entscheide zu dieser Bar zu gehen";

  Function pageTest;

  @override
  initState() {
    super.initState();
    pageTest = thirdSurveyPage;
  }

  Map<int, String> questions = {
    11: "1. Mit der BarBachelor-App bin ich:",
    12: "2. Wenn ich beim nächsten Event die Wahl habe, möchte ich diese App noch einmal verwenden.",
    13: "3. Die Infos zu jeder Bar waren zuverlässig",
    14: "4. Es war schwierig sich zu entscheiden, zu welcher Bar man als nächstes geht.",
    15: "5. Ich finde die BarBachelor-App nützlich.",
    16: "6. Was bedeuten die Handsymbole bei jeder Bar?",
  };

  ///This doesnt work
  @override
  Widget build(BuildContext context) {
    print("build");
    return Scaffold(
        body: AnimatedSwitcher(
            duration: Duration(milliseconds: 800), child: pageTest()));
  }

  Widget thirdSurveyPage() {
    return Container(
      key: ValueKey(3),
      margin: EdgeInsets.all(16),
      child: Column(
        mainAxisSize: MainAxisSize.max,
        children: <Widget>[
          Padding(padding: EdgeInsets.only(top: 32)),
          Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: <Widget>[
              RadioListTile<String>(
                title: const Text(
                    'Was andere Besucher vermutlich denken, wenn ich mich entscheide zu dieser Bar zu gehen.'),
                value:
                    "Was andere Besucher vermutlich denken, wenn ich mich entscheide zu dieser Bar zu gehen.",
                groupValue: _answerQ6,
                onChanged: (String value) {
                  setState(() {
                    _answerQ6 = value;
                  });
                },
              ),
              RadioListTile<String>(
                title: const Text("Wie gut die Stimmung in dieser Bar ist."),
                value: "Wie gut die Stimmung in dieser Bar ist.",
                groupValue: _answerQ6,
                onChanged: (String value) {
                  setState(() {
                    _answerQ6 = value;
                  });
                },
              ),
            ],
          ),
          Expanded(
            child: Align(
              alignment: Alignment.bottomRight,
              child: Row(
                mainAxisAlignment: MainAxisAlignment.end,
                children: <Widget>[
                  RaisedButton(
                    color: Colors.brown,
                    child: Text(
                      "Test einreichen",
                      style: TextStyle(color: Colors.white),
                    ),
                    onPressed: () => setState(() {
                      print(_answerQ6);
                    }),
                  ),
                ],
              ),
            ),
          ),
        ],
      ),
    );
  }
}