Flutter多步账户设置页面滑动切换时已填写数据丢失无法保存如何解决

问题根因 #

你遇到的表单数据丢失是两个核心问题导致的：

1. 表单状态存在子组件Gender内部，而Swiper默认会销毁不在当前视口的子组件，组件销毁后内部存储的选择状态就会被清空
2. 所有步骤使用同类型的Gender组件时没有配置唯一Key，同时你提前在initState中初始化了所有步骤组件实例，组件滚动重建时状态对应关系错乱

解决方案 #

核心思路是状态提升，把所有步骤的表单数据统一放到父组件UserInfo2中存储，子组件改为受控组件，仅负责UI渲染和交互通知，不持有状态。具体修改如下：

第一步：修改Gender为受控组件 #

修改后的Gender组件接收父组件传入的初始值和修改回调，不内部存储状态，同时混入保活逻辑避免滑动后组件被回收：

class Gender extends StatefulWidget {
  // 新增参数：当前已选值、值修改回调、唯一Key
  final int? selectedValue;
  final Function(int?) onChanged;
  const Gender({Key? key, required this.selectedValue, required this.onChanged}) : super(key: key);

  @override
  _GenderState createState() => _GenderState();
}

class _GenderState extends State<Gender> with AutomaticKeepAliveClientMixin {
  // 混入保持组件状态不被回收
  @override
  bool get wantKeepAlive => true;

  List<String> genders=["Male","Female","Transgender Male", "Transgender Female", "Other"];

  @override
  Widget build(BuildContext context) {
    super.build(context); // 必加，配合AutomaticKeepAliveClientMixin生效
    return Container(
      height: 500,
      child: Column(
        children: [
          Text(
            "Gender",
            style: TextStyle(
              fontFamily: 'Avenir',
              fontSize: 30,
              color: Colors.black54,
              fontWeight: FontWeight.w900,
            ),
          ),
          SizedBox(height: 8,),
          Text(
            "choose one",
            style: TextStyle(
              fontFamily: 'Avenir',
              fontSize: 20,
              color: Colors.black54,
              fontWeight: FontWeight.normal,
            ),
          ),
          SizedBox(height: 8,),
          SizedBox(
            height: 400,
            child: ListView.builder(
              itemCount: genders.length,
              itemBuilder: (context, index){
                bool isSelected = widget.selectedValue == index;
                return Padding(
                  padding: const EdgeInsets.all(4.0),
                  child: Container(
                    decoration: BoxDecoration(
                        borderRadius: BorderRadius.circular(16),
                        color: isSelected ? Colors.greenAccent.withOpacity(0.5) : Colors.transparent,
                        border: Border.all(color: gradientStartColor.withOpacity(0.5) ),
                        boxShadow: [isSelected ? BoxShadow(
                          color: Colors.grey.withOpacity(0.5),
                          spreadRadius: 2,
                          blurRadius: 7,
                          offset: Offset(0, 3),
                        ):BoxShadow(color: Colors.transparent)
                        ]
                    ),
                    child: ListTile(
                        onTap: (){
                          int? newValue;
                          if(isSelected){
                            newValue = null;
                          }else{
                            newValue = index;
                          }
                          // 直接调用父组件回调更新状态
                          widget.onChanged(newValue);
                        },
                        title:Text( genders[index].toString(),
                          textAlign: TextAlign.center,)
                    ),
                  ),
                );
              },
            ),
          ),
        ],
      ),
    );
  }
}

第二步：修改父组件UserInfo2统一管理状态 #

删除提前初始化的pages数组，新增存储所有步骤数据的列表，动态构建子组件时传入唯一Key、初始值和回调：

class _UserInfo2 extends State<UserInfo2> {
  int tempsex=0;
  // 新增：存储6个步骤的选择结果，初始为null
  List<int?> stepFormValues = List.filled(6, null);
  final _key = GlobalKey();
  bool enabled=false;

  @override
  void initState(){
    super.initState();
    // 删掉原来提前初始化pages数组的代码，改为动态构建
  }

  @override
  Widget build(BuildContext context) {
    var _onPressed = null;
    if (enabled==true){
      _onPressed = (){
        // 所有步骤的数据都存在stepFormValues里，直接提交即可
        print(stepFormValues);
      };
    }
    return Scaffold(
        backgroundColor: gradientEndColor,
        body: SingleChildScrollView(
          child: Container(
            decoration: BoxDecoration(
              gradient: LinearGradient(
                  colors: [gradientStartColor, gradientEndColor],
                  begin: Alignment.topCenter,
                  end: Alignment.bottomCenter,
                  stops: [0.3, 0.7]),
            ),
            child: SafeArea(
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: <Widget>[
                  Padding(
                    padding: const EdgeInsets.all(32.0),
                    child: Column(
                      children: <Widget>[
                        Text(
                          'Let us know a bit more about you!',
                          style: TextStyle(
                            fontFamily: 'Avenir',
                            fontSize: 30,
                            color: const Color(0xffffffff),
                            fontWeight: FontWeight.w900,
                          ),
                          textAlign: TextAlign.left,
                        ),
                      ],
                    ),
                  ),
                  Container(
                    height: 600,
                    padding: const EdgeInsets.only(left: 16),
                    child: Swiper(
                      loop: false,
                      itemCount: 6,
                      itemWidth: MediaQuery.of(context).size.width-50,
                      itemHeight: 620,
                      layout: SwiperLayout.STACK,
                      pagination: SwiperPagination(
                        builder: DotSwiperPaginationBuilder(activeSize: 20, space: 6),
                      ),
                      // 新增：配置Swiper保持页面状态
                      keepPage: true,
                      itemBuilder: (context, index) {
                        return InkWell(
                          child: Stack(
                            children: <Widget>[
                              Column(
                                children: <Widget>[
                                  Card(
                                    elevation: 16,
                                    shape: RoundedRectangleBorder(
                                      borderRadius: BorderRadius.circular(16),
                                    ),
                                    color: Colors.white,
                                    child: Padding(
                                      padding: const EdgeInsets.only(top: 16.0, bottom: 16.0),
                                      child: Column(
                                        crossAxisAlignment: CrossAxisAlignment.start,
                                        children: <Widget>[
                                          // 动态构建Gender组件，传入唯一Key、当前值和回调
                                          Gender(
                                            key: Key('step_$index'),
                                            selectedValue: stepFormValues[index],
                                            onChanged: (newVal){
                                              setState(() {
                                                stepFormValues[index] = newVal;
                                                // 可以在这里加校验，所有步骤都填了就启用提交按钮
                                                enabled = stepFormValues.every((val) => val != null);
                                              });
                                            },
                                          ),
                                        ],
                                      ),
                                    ),
                                  ),
                                ],
                              ),
                              Positioned(
                                right: 10,
                                bottom: 45,
                                child: Text(
                                  (index+1).toString(),
                                  style: TextStyle(
                                    fontFamily: 'Avenir',
                                    fontSize: 160,
                                    color: primaryTextColor.withOpacity(0.08),
                                    fontWeight: FontWeight.w900,
                                  ),
                                  textAlign: TextAlign.left,
                                ),
                              ),
                            ],
                          ),
                        );
                      },
                    ),
                  ),
                  Column(
                    children: [
                      RaisedButton(
                        color: gradientStartColor,
                        textColor: Colors.white,
                        child: Container(
                          height: 50.0,
                          child: Center(
                            child: Text(
                              "Finish!",
                              style: TextStyle(fontSize: 18.0, fontFamily: "Brand-Regular"),
                            ),
                          ),
                        ),
                        shape: new RoundedRectangleBorder(
                          borderRadius: new BorderRadius.circular(24),
                        ),
                        onPressed: _onPressed,
                      ),
                    ],
                  )
                ],
              ),
            ),
          ),
        )
    );
  }
}

补充说明 #

如果后续步骤使用不同的表单组件（比如年龄输入、爱好选择等），只需要按照同样的逻辑，把组件改为受控组件，把状态存到父级的stepFormValues里即可，数据不会再因为滑动切换丢失。

内容的提问来源于stack exchange，提问作者Sim0n