键入另一个文本字段时，动态文本字段数据将丢失

Posted 2023-02-23

【中文标题】键入另一个文本字段时，动态文本字段数据将丢失

【英文标题】：Dynamic text field data will missing when key in another text field

【发布时间】：2021-03-18 10:13:36

【问题描述】：

我想创建一个动态文本字段供用户添加信息。 但我不知道为什么如果用户首先在房间页面中输入某些内容

然后进入楼层页面并输入

返回房间页面，数据键会丢失。

我想知道如何防止动态文本字段数据丢失。 非常感谢。

这里是源代码 这是标签页：

import "package:flutter/material.dart";
import './tab1.dart';

class TabPage extends StatefulWidget 
  @override
  _TabPage createState() => _TabPage();


class _TabPage extends State<TabPage> with SingleTickerProviderStateMixin 
    TextEditingController doorNumberController = new TextEditingController();
  List<Widget> _checkingForm = <Widget>[];
  final List<Tab> myTabs = <Tab>[
    Tab(text: 'Room'),
    Tab(text: 'Floor'),
  ];

  int _checkingIndex = 1;
  void _addChecking() 
    _checkingForm = List.from(_checkingForm)
      ..add(Tab1());

    setState(() 
      _checkingIndex += 1;
    );
  

  TabController _tabController;

  @override
  void initState() 
    super.initState();
    _tabController = TabController(vsync: this, length: myTabs.length);
    _addChecking();
  

 @override
 void dispose() 
   _tabController.dispose();
   super.dispose();
 

  @override
  Widget build(BuildContext context) 
    return Scaffold(
      appBar: AppBar(
        bottom: TabBar(
          controller: _tabController,
          tabs: myTabs,
        ),
      ),
      body: TabBarView(
        controller: _tabController,
            children: [
              ListView(
                children: <Widget>[  
                  Text('Add the room number',textAlign: TextAlign.center,style: TextStyle(
                      color: Colors.black,
                      fontWeight: FontWeight.w900,
                      fontSize: 25),
                  ),
                  IconButton(
                    icon: Icon(Icons.add_circle,color: Colors.lightBlue),
                    onPressed: () 
                        _addChecking();
                      ,
                    ),   
                    Column(
                      children:_checkingForm,
                  ),     
                ]
              ),
              ListView(
                  children: <Widget>[
                    Text('Floor:', textAlign: TextAlign.left,style: TextStyle(
                      color: Colors.black,
                      fontWeight: FontWeight.w900,
                      fontSize: 25),
                    ),
                      Container(              
                            width: 250.0,
                            child: TextField(
                              controller: doorNumberController,
                              decoration: InputDecoration(
                                border: OutlineInputBorder(),
                                labelText: 'Floor:',
                          ),
                        ),
                      ),  
                    ]
              ),
            ]
      ),
    );
  

这是动态文本字段页面：

import 'dart:convert';
import 'package:http/http.dart' as http;
import "package:flutter/material.dart";

class Tab1 extends StatefulWidget 
  _Tab1 createState() => _Tab1();
  


class _Tab1 extends State<Tab1> 
  TextEditingController doorNumberController = new TextEditingController();
  @override
  Widget build(BuildContext context) 
      return Card(
        child: Column(
          children: <Widget>[
                Row( 
                  children: <Widget>[
                    Text('Room:', textAlign: TextAlign.left,style: TextStyle(
                      color: Colors.black,
                      fontWeight: FontWeight.w900,
                      fontSize: 25),
                    ),
                      Container(              
                            width: 250.0,
                            child: TextField(
                              controller: doorNumberController,
                              decoration: InputDecoration(
                                border: OutlineInputBorder(),
                                labelText: 'Room number:',
                          ),
                        ),
                      ),  
                    ]
                  ),
          ]
        )
      );
  

【问题讨论】：

我想你可以试试这个答案***.com/a/51225319/13068292

当您在选项卡之间移动时，您的 Tab 对象将被销毁并重新创建。你需要实现一个状态管理解决方案或者简单地使用@AldyYuan 的建议。

【参考方案1】：

解决方法很简单...... 只需添加with AutomaticKeepAliveClientMixin<Tab1> 和bool get wantKeepAlive => true; 即可解决。 谢谢阿尔迪。

import 'dart:convert';
import 'package:http/http.dart' as http;
import "package:flutter/material.dart";

class Tab1 extends StatefulWidget 

  String input;
  @override
  _Tab1 createState() => _Tab1();
  


class _Tab1 extends State<Tab1> with AutomaticKeepAliveClientMixin<Tab1> 
  TextEditingController doorNumberController = new TextEditingController();
  void initState() 
    super.initState();
    //doorNumberController.text=input;
  
  @override
  Widget build(BuildContext context) 
      return Card(
        child: Column(
          children: <Widget>[
                Row( 
                  children: <Widget>[
                    Text('Room:', textAlign: TextAlign.left,style: TextStyle(
                      color: Colors.black,
                      fontWeight: FontWeight.w900,
                      fontSize: 25),
                    ),
                      Container(              
                            width: 250.0,
                            child: TextField(
                              controller: doorNumberController,
                              decoration: InputDecoration(
                                border: OutlineInputBorder(),
                                labelText: 'Room number:',
                          ),
                        ),
                      ),                  
                    ]
                  ),
                Row(
                  children:<Widget>[
                    IconButton(
                      icon: const Icon(Icons.save),
                      color: Colors.blue,
                        onPressed: () 
                          print(doorNumberController.text);
                      ,
                    ),      
                  ]
                ) 
          ]
        )
      );
  
  bool get wantKeepAlive => true;