flutter - 在 Stepper 中保持状态

Question

我的 Stepper 中有多个步骤。在每个步骤之间移动时如何保持步骤的状态？

我已经尝试添加 AutomaticKeepAliveClientMixin，但它仍然没有保持状态:

class _MyHomePageState extends State<MyHomePage> with AutomaticKeepAliveClientMixin<MyHomePage> {
  int currentStep = 0;
  List<Step> stepList = [
    Step(
      title: Text("Page A"),
      content: Column(
        children: <Widget>[
          Text("Page A"),
          TextField(
            decoration: InputDecoration(
              border: InputBorder.none,
              hintText: "Enter anything"
            ),
          ),
        ],
      )
    ),
    Step(
      title: Text("Page B"),
      content: Text("Page B")
    ),
    Step(
      title: Text("Page C"),
      content: Text("Page C")
    ),
    Step(
      title: Text("Page D"),
      content: Text("Page D")
    ),
    Step(
      title: Text("Page E"),
      content: Text("Page ")
    ),
  ];

  @override
  Widget build(BuildContext context) {
    super.build(context);
    return Scaffold(
      body: Stepper(
        steps: stepList,
        type: StepperType.horizontal,
        currentStep: currentStep,
        onStepContinue: nextStep,
        onStepCancel: cancelStep,
      ),
    );
  }

  void nextStep(){
    setState(() {
      if(currentStep < stepList.length - 1)
        currentStep++;
    });
  }

  void cancelStep(){
    setState(() {
      if(currentStep > 0)
      currentStep--;
    });
  }

  @override
  bool get wantKeepAlive => true;
}

如果我向文本字段添加任何内容，导航到页面 B，然后导航回页面 A，文本字段将重置为空。

如何保持每个步骤“页面”的状态？

编辑:可能应该早点透露这一点。我有 5 个步骤，每个步骤包含 8-12 个字段，包括文本字段、复选框、下拉列表等。这是一个多步骤表单。我知道你可以创建一个类级别的 TextFieldController 来拥有一个“全局”变量来跟踪步骤中 TextField 的状态，但这意味着我需要大约 50 个类级别的变量，代码看起来太复杂了。这就是我使用 AutomaticKeepAliveClientMixin 的原因，但它不起作用。有更好的方法来处理这个问题吗？

Answer 1

发生了什么是你的TextField当您从另一个导航到它时正在重建 Step因此值(value)正在被重置。

解决方法:

1. 转换您的 List<Step>至 get返回 List<Step>喜欢List<Step> get stepList => [
2. 这样做的原因是让您的列表能够访问全局变量。
3. 创建 TextEditingController作为全局变量:TextEditingController textEditingController = TextEditingController();

4. 将该 Controller 交给您的 TextField如下所示:

     TextField(
       controller: textEditingController,
       decoration: InputDecoration(
         border: InputBorder.none,
         hintText: "Enter anything"
       ),
     ),
   

现在会发生什么，因为你有 TextEditingController , 每当你的 TextField将重建它将使用 Controller 获取值，因此，每当您在 Step 之间切换时这是你的TextField值不会重置。

我已经编辑了你的代码，下面是经过上述更改的代码:

class _MyHomePageState extends State<MyHomePage> with AutomaticKeepAliveClientMixin<MyHomePage> {
  int currentStep = 0;

  TextEditingController textEditingController = TextEditingController();

  List<Step> get stepList => [
    Step(
      title: Text("Page A"),
      content: Column(
        children: <Widget>[
          Text("Page A"),
          TextField(
            controller: textEditingController,
            decoration: InputDecoration(
              border: InputBorder.none,
              hintText: "Enter anything"
            ),
          ),
        ],
      )
    ),
    Step(
      title: Text("Page B"),
      content: Text("Page B")
    ),
    Step(
      title: Text("Page C"),
      content: Text("Page C")
    ),
    Step(
      title: Text("Page D"),
      content: Text("Page D")
    ),
    Step(
      title: Text("Page E"),
      content: Text("Page ")
    ),
  ];

  @override
  Widget build(BuildContext context) {
    super.build(context);
    return Scaffold(
      body: Stepper(
        steps: stepList,
        type: StepperType.horizontal,
        currentStep: currentStep,
        onStepContinue: nextStep,
        onStepCancel: cancelStep,
      ),
    );
  }

  void nextStep(){
    setState(() {
      if(currentStep < stepList.length - 1)
        currentStep++;
    });
  }

  void cancelStep(){
    setState(() {
      if(currentStep > 0)
      currentStep--;
    });
  }

  @override
  bool get wantKeepAlive => true;
}

希望对您有所帮助，如有疑问请评论。 如果此答案对您有帮助，请采纳并点赞。