Flutter：将setstate与AnimatedSwitcher一起使用时，未重建窗口小部件

Question

我有一个关于RadioListTile和Flutter中的Radio的问题。 将RadioListTile与AnimatedSwitcher一起使用时，无法选择单选按钮。

错误在于此行：

 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”显然没有被重建，但我不知道如何解决。

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

谢谢。

Answer 1

您可以在下面复制粘贴运行完整代码
thirdSurveyPage()是一个函数，因此您可以使用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);
                    }),
                  ),
                ],
              ),
            ),
          ),
        ],
      ),
    );
  }
}