使用带有多个标签的表单吗?颤动

问题描述 投票:0回答:1

我制作的表单存在问题,该表单保存了新创建的产品数据并将其添加到项目中。但是数据正在被删除!每当我切换tabs时,先前的TextFormField数据都会被删除。是否有可能将2个标签连接成1个? eventho form在其上方,并带有key

这里缺少我的代码的外观:

import 'package:flutter/material.dart';
import 'package:google_fonts_arabic/fonts.dart';
import 'package:provider/provider.dart';

import '../add_ons/add_car.dart';
import '../providers/car_provider.dart';
import '../drawer/drawer.dart';
import '../screens/cars_screen.dart';

class CreateCar extends StatefulWidget {
  static const routeName = '/create-car';

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

class _CreateCarState extends State<CreateCar> {
  final _nameNode = FocusNode();
  final _cityNode = FocusNode();
  final _countryNode = FocusNode();
  final _currencyTNode = FocusNode();
  final _priceNode = FocusNode();
  final _categoryNode = FocusNode();
  final _companyNode = FocusNode();
  final _modelNode = FocusNode();
  final _engineNode = FocusNode();
  final _distanceCoveredNode = FocusNode();
  final _transmissionNode = FocusNode();
  final _oilTNode = FocusNode();
  final _outColorNode = FocusNode();
  final _inColorNode = FocusNode();
  final _descriptionNode = FocusNode();
  final _addressNode = FocusNode();
  final _imageController = TextEditingController();
  final _name = TextEditingController();

  final _city = TextEditingController();
  final _country = TextEditingController();
  final _currencyT = TextEditingController();
  final _price = TextEditingController();
  final _category = TextEditingController();
  final _engine = TextEditingController();
  final _distance = TextEditingController();
  final _transmission = TextEditingController();
  final _oil = TextEditingController();
  final _ocolor = TextEditingController();
  final _icolor = TextEditingController();
  final _description = TextEditingController();
  final _address = TextEditingController();
  final _company = TextEditingController();

  @override
  void dispose() {
    _nameNode.dispose();
    _cityNode.dispose();
    _countryNode.dispose();
    _currencyTNode.dispose();
    _priceNode.dispose();
    _categoryNode.dispose();
    _companyNode.dispose();
    _modelNode.dispose();
    _engineNode.dispose();
    _distanceCoveredNode.dispose();
    _transmissionNode.dispose();
    _oilTNode.dispose();
    _outColorNode.dispose();
    _inColorNode.dispose();
    _descriptionNode.dispose();
    _addressNode.dispose();
    super.dispose();
  }
  final _form = GlobalKey<FormState>();
  var _createdCar = AddCar(
    id: null,
    name: '',
    city: '',
    country: '',
    currencyT: '',
    price: '',
    date: DateTime.now(),
    sponsNum: '',
    category: '',
    company: '',
    model: '',
    year: 2019,
    engine: '',
    distanceCovered: 0.0,
    transmission: '',
    oilT: '',
    outColor: '',
    inColor: '',
    description: '',
    address: '',
    image: '',
  );

  void _saveForm() {
    final isValid = _form.currentState;
    if (!isValid.validate()) {
      print('enter correct data');
    } else {
      _form.currentState.save();
      Provider.of<Cars>(context, listen: false).addCar(_createdCar);
      Navigator.of(context).pushNamed(CarsScreen.routeName);
      print('this works');
    }
  }

  @override
  Widget build(BuildContext context) {
    return DefaultTabController(
      length: 2,
      initialIndex: 1,
      child: Scaffold(
        appBar: AppBar(
          elevation: 15,
          title: Row(
            children: <Widget>[
              Text(
                'إضافة إعلان سيارة',
                textAlign: TextAlign.center,
              ),
              IconButton(
                icon: Icon(Icons.save),
                onPressed: _saveForm,
              ),
            ],
          ),
        ),
        endDrawer: MyDrawer(),
        body: Column(
          children: <Widget>[
            Container(
              color: Theme.of(context).primaryColor,
              child: TabBar(
                indicator:
                    BoxDecoration(color: Color.fromRGBO(67, 45, 134, 1.0)),
                isScrollable: true,
                labelColor: Theme.of(context).accentColor,
                unselectedLabelColor: Colors.white,
                indicatorWeight: 0.1,
                tabs: <Widget>[
                  Container(
                    width: MediaQuery.of(context).size.width * 0.5,
                    child: Tab(
                      child: Text(
                        'معلومات الإعلان',
                        style: TextStyle(
                          fontFamily: ArabicFonts.Tajawal,
                          package: 'google_fonts_arabic',
                        ),
                      ),
                    ),
                  ),
                  Container(
                    width: MediaQuery.of(context).size.width * 0.5,
                    child: Tab(
                      child: Text(
                        'معلومات السيارة',
                        style: TextStyle(
                          fontFamily: ArabicFonts.Tajawal,
                          package: 'google_fonts_arabic',
                        ),
                      ),
                    ),
                  ),
                ],
              ),
            ),
            Expanded(
              child: Form(
                autovalidate: true,
                key: _form,
                child: TabBarView(
                  children: <Widget>[
                    ListView(
                      children: <Widget>[
                        Padding(
                          padding:
                              const EdgeInsets.only(right: 25.0, left: 25.0),
                          child: Column(
                            textDirection: TextDirection.rtl,
                            children: <Widget>[
                              Directionality(
                                textDirection: TextDirection.rtl,
                                child: TextFormField(
                                  decoration: InputDecoration(
                                    labelText: 'سعة المحرك',
                                  ),
                                  focusNode: _engineNode,
                                  onFieldSubmitted: (_) {
                                    FocusScope.of(context)
                                        .requestFocus(_distanceCoveredNode);
                                  },
                                  controller: _engine,
                                  validator: (value) {
                                    if (value.isEmpty) {
                                      return 'Please provide a value.';
                                    }
                                    return null;
                                  },
                                  onSaved: (value) {
                                    _createdCar = AddCar(
                                        id: null,
                                        name: _createdCar.name,
                                        city: _createdCar.city,
                                        country: _createdCar.country,
                                        currencyT: _createdCar.currencyT,
                                        price: _createdCar.price,
                                        date: _createdCar.date,
                                        sponsNum: _createdCar.sponsNum,
                                        category: _createdCar.category,
                                        company: _createdCar.company,
                                        model: _createdCar.model,
                                        year: _createdCar.year,
                                        engine: value,
                                        distanceCovered:
                                            _createdCar.distanceCovered,
                                        transmission: _createdCar.transmission,
                                        oilT: _createdCar.oilT,
                                        outColor: _createdCar.outColor,
                                        inColor: _createdCar.inColor,
                                        description: _createdCar.description,
                                        address: _createdCar.address,
                                        image: _createdCar.image);
                                  },
                                ),
                              ),
                             //other data
                            ],
                          ),
                        ),
                      ],
                    ),
                    ListView(
                      children: <Widget>[
                        Padding(
                          padding:
                              const EdgeInsets.only(right: 25.0, left: 25.0),
                          child: Column(
                            children: <Widget>[
                              Directionality(
                                textDirection: TextDirection.rtl,
                                child: TextFormField(
                                  decoration: InputDecoration(
                                    labelText: 'عنوان الإعلان',
                                  ),
                                  validator: (value) {
                                    if (value.isEmpty) {
                                      return 'Please provide a value.';
                                    }
                                    return null;
                                  },
                                  controller: _name,
                                  focusNode: _nameNode,
                                  onFieldSubmitted: (_) {
                                    FocusScope.of(context)
                                        .requestFocus(_priceNode);
                                  },
                                  onSaved: (value) {
                                    _createdCar = AddCar(
                                        id: null,
                                        name: value,
                                        city: _createdCar.city,
                                        country: _createdCar.country,
                                        currencyT: _createdCar.currencyT,
                                        price: _createdCar.price,
                                        date: _createdCar.date,
                                        sponsNum: _createdCar.sponsNum,
                                        category: _createdCar.category,
                                        company: _createdCar.company,
                                        model: _createdCar.model,
                                        year: _createdCar.year,
                                        engine: _createdCar.engine,
                                        distanceCovered:
                                            _createdCar.distanceCovered,
                                        transmission: _createdCar.transmission,
                                        oilT: _createdCar.oilT,
                                        outColor: _createdCar.outColor,
                                        inColor: _createdCar.inColor,
                                        description: _createdCar.description,
                                        address: _createdCar.address,
                                        image: _createdCar.image);
                                  },
                                ),
                              ),
                             // other data
                            ],
                          ),
                        ),
                      ],
                    ),
                  ],
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

enter image description hereenter image description here

forms flutter tabbar
1个回答
0
投票

您必须使用AutomaticKeepAliveClientMixin来获得所需的输出。

以下示例清除您的想法。

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Test(),
      ),
    );
  }
}

class Test extends StatefulWidget {
  @override
  _TestState createState() => _TestState();
}

class _TestState extends State<Test> {

  @override
  Widget build(BuildContext context) {
    return DefaultTabController(
      length: 2,
      child: Scaffold(
        appBar: AppBar(
          title: Container(
            child: Text('Dashboard'),
          ),
          bottom: TabBar(
            tabs: <Widget>[
              Container(
                padding: EdgeInsets.all(8.0),
                child: Text('Deals'),
              ),
              Container(
                padding: EdgeInsets.all(8.0),
                child: Text('Viewer'),
              ),
            ],
          ),
        ),
        body: TabBarView(
          children: <Widget>[
            DealList(),
            ViewersPage(),
          ],
        ),
      ),
    );
  }


}

class DealList extends StatefulWidget{
  @override
  _DealListState createState() => _DealListState();
}

class _DealListState extends State<DealList>  with AutomaticKeepAliveClientMixin<DealList>{
  @override
  Widget build(BuildContext context) {
    return Container(
      child: TextFormField(

      ),
    );
  }

  @override
  // TODO: implement wantKeepAlive
  bool get wantKeepAlive => true;
}

class ViewersPage extends StatefulWidget {
  @override
  _ViewersPageState createState() => _ViewersPageState();
}

class _ViewersPageState extends State<ViewersPage>  with AutomaticKeepAliveClientMixin<ViewersPage>{
  @override
  Widget build(BuildContext context) {
    return Container(
      child: TextFormField(

      ),
    );
  }

  @override
  // TODO: implement wantKeepAlive
  bool get wantKeepAlive => true;

}

更新:

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {

  final _form  = GlobalKey<FormState>();
  final _name = TextEditingController();
  final _city = TextEditingController();
  String name,city;


  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Form(
        key: _form,
        child: new Container(
          child: Column(
            children: <Widget>[
              TextFormField(
                decoration: InputDecoration(
                  labelText: 'سعة المحرك',
                ),
                controller: _name,
                validator: (value) {
                  if (value.isEmpty) {
                    return 'Please provide a value.';
                  }
                  return null;
                },
                onSaved: (value) {
                  name = _name.text.toString();
                  city = _city.text.toString();
                  print(city.toString());
                },
              ),
              TextFormField(
                decoration: InputDecoration(
                  labelText: 'سعة المحرك',
                ),
                controller: _city,
                validator: (value) {
                  if (value.isEmpty) {
                    return 'Please provide a value.';
                  }
                  return null;
                },
              ),
              RaisedButton(
                  onPressed: (){
                    _form.currentState.save();
                  }
              )
            ],
          ),
        ),
      ),
    );
  }
}
© www.soinside.com 2019 - 2024. All rights reserved.