Flutter:设置状态后将数据保留在文本字段中

  1. 我有一个文本字段数组。
  2. 一个将新的文本字段添加到数组的按钮。
  3. 如果将数据添加到文本字段并通过单击添加新元素 添加按钮,添加的数据就消失了。
  4. 按钮功能中有一个setstate来查看新元素 进行排列。
  5. 如何将新元素添加到数组中以将旧数据保留在 文本字段?

start_workout.dart

    import 'package:flutter/material.dart';
import 'package:fultter_ultralifestyle/src/models/models.dart' show SetModel;
import 'package:fultter_ultralifestyle/src/presentation/widgets/dynamic_widget.dart';

class WorkoutStartScreen extends StatefulWidget {
  static const String routeName = "workoutStart";
  @override
  _WorkoutStartScreenState createState() => _WorkoutStartScreenState();
}

class _WorkoutStartScreenState extends State<WorkoutStartScreen> {
  final List<SetModel> sets = [
  ];

  void _addSet() {
    final id = sets.length;
    sets.add(SetModel(id: id,pounds: 0,reps: 0));
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Workout tracker"),centerTitle: true,),body: Container(
        child: Column(
          children: <Widget>[
            Expanded(
              child: ListView.builder(
                  itemCount: sets.length,itemBuilder: (BuildContext context,int index) {
                    return DynamicWidget(
                      set: sets[index],pos: index +1,delete: () {
                        sets.removeAt(index);
                        setState(() {});
                      },);
                  }),)
          ],floatingactionButton: FloatingactionButton(
        onpressed: () => _addSet(),child: Icon(Icons.add),);
  }
}

dynamic_widget.dart

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:fultter_ultralifestyle/src/models/models.dart';
import 'package:fultter_ultralifestyle/src/presentation/widgets/text_widget.dart';

class DynamicWidget extends StatelessWidget {
  final TextEditingController poundsController = TextEditingController();
  final TextEditingController repsController = TextEditingController();

  final SetModel set;
  final int pos;
  Function delete;

  DynamicWidget({
    Key key,@required this.set,@required this.pos,@required this.delete,}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final Size size = MediaQuery.of(context).size;

    return Container(
      child: Column(
        children: <Widget>[
          Row(
            mainAxisAlignment: MainAxisAlignment.center,children: <Widget>[
              Container(
                child: text(
                  caption: "SET $pos",SizedBox(width: 20.0),Container(
                width: size.width / 4,child: Column(
                  children: <Widget>[
                    TextField(
                      controller: poundsController,keyboardType: TextInputType.number,inputFormatters: [
                        WhitelistingTextInputFormatter.digitsonly,],SizedBox(height: 10),text(caption: "pounds".toUpperCase()),SizedBox(
                width: 20,text(caption: "X"),child: Column(
                  children: <Widget>[
                    TextField(
                      controller: repsController,inputFormatters: [
                        WhitelistingTextInputFormatter.digitsonly
                      ],text(caption: "reps".toUpperCase()),SizedBox(width: 5.0),IconButton(
                icon: Icon(Icons.delete_forever),onpressed: delete,)
            ],);
  }
}
luopeng188020 回答:Flutter:设置状态后将数据保留在文本字段中

使用控制器!

TextEditingController password = new TextEditingController();

TextFormField(
                  validator: (value) {
                    if (value.isEmpty) {
                      return "Could not be empty";
                    }
                    return null;
                  },enabled: !isLoading,controller: password,obscureText: hidePassword,decoration: InputDecoration(
                    suffix: IconButton(icon: Icon((hidePassword)?Icons.remove_red_eye:Icons.cancel),onPressed: () => setState(() => hidePassword = !hidePassword),),labelText: "PASSWORD",border: OutlineInputBorder(
                          borderRadius: BorderRadius.circular(20))),onFieldSubmitted: (String p) {
                    buttonPressed();
                  },

然后使用

进行检索
var pass = username.text;

很明显,您可以使用一个控制器数组,然后检索它们

,

我只是通过在文本字段中的文本更改时使您的SetModel更新来解决此问题。主要部分是动态窗口小部件的文本字段中的updatePoundsupdateReps方法以及onChanged方法。

在构建动态窗口小部件时,我还确保使用SetModel中包含的值来初始化控制器。

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';

void main() {
  runApp(MaterialApp(
    home: WorkoutStartScreen(),));
}

class SetModel {
  final int id;
  int pounds;
  int reps;

  SetModel({
    this.id,this.pounds,this.reps,});

  void updatePounds(int pounds) {
    this.pounds = pounds;
  }

  void updateReps(int reps) {
    this.reps = reps;
  }
}

class WorkoutStartScreen extends StatefulWidget {
  static const String routeName = "workoutStart";
  @override
  _WorkoutStartScreenState createState() => _WorkoutStartScreenState();
}

class _WorkoutStartScreenState extends State<WorkoutStartScreen> {
  final List<SetModel> sets = [];

  void _addSet() {
    final id = sets.length;
    setState(() {
      sets.add(SetModel(id: id,pounds: 0,reps: 0));
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Workout tracker"),centerTitle: true,body: Container(
        child: Column(
          children: <Widget>[
            Expanded(
              child: ListView.builder(
                itemCount: sets.length,itemBuilder: (BuildContext context,int index) {
                  return DynamicWidget(
                    set: sets[index],pos: index + 1,delete: () {
                      setState(() {
                        sets.removeAt(index);
                      });
                    },);
                },)
          ],floatingActionButton: FloatingActionButton(
        onPressed: () => _addSet(),child: Icon(Icons.add),);
  }
}

class DynamicWidget extends StatelessWidget {
  final TextEditingController poundsController = TextEditingController();
  final TextEditingController repsController = TextEditingController();

  final SetModel set;
  final int pos;
  final Function delete;

  DynamicWidget({
    Key key,@required this.set,@required this.pos,@required this.delete,}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final Size size = MediaQuery.of(context).size;

    if (set.pounds != 0) {
      poundsController.text = set.pounds.toString();
    }

    if (set.reps != 0) {
      repsController.text = set.reps.toString();
    }

    return Container(
      child: Column(
        children: <Widget>[
          Row(
            mainAxisAlignment: MainAxisAlignment.center,children: <Widget>[
              Container(
                child: Text(
                  "SET $pos",SizedBox(width: 20.0),Container(
                width: size.width / 4,child: Column(
                  children: <Widget>[
                    TextField(
                      controller: poundsController,onChanged: (String pounds) {
                        set.updatePounds(int.parse(pounds));
                      },keyboardType: TextInputType.number,inputFormatters: [WhitelistingTextInputFormatter.digitsOnly],SizedBox(height: 10),Text("pounds".toUpperCase()),],SizedBox(
                width: 20,Text("X"),child: Column(
                  children: <Widget>[
                    TextField(
                      controller: repsController,onChanged: (String reps) {
                        set.updateReps(int.parse(reps));
                      },Text("reps".toUpperCase()),SizedBox(width: 5.0),IconButton(
                icon: Icon(Icons.delete_forever),onPressed: delete,)
            ],);
  }
}

基本上,每次您从其父级调用setState时,都会重新绘制动态窗口小部件。由于您从未告诉动态小部件保存任何内容,因此它们将从头开始重绘。除了现在我们给他们一些初步信息外,这种情况仍在发生。

Here是其工作的视频。

本文链接:https://www.f2er.com/3139026.html

大家都在问