Question

我正在制作一个应用程序，用户应该在其中向文本字段输入指令。由于我不知道要执行多少步骤，因此我希望他们能够通过按一下按钮来添加新的文本字段。 Picture here.

我为文本表单字段创建了一个自定义类：

class MyTextFormField extends StatelessWidget {
  final String labelText;
  final Function validator;
  final Function onSaved;
  final int maxLines;
  final int maxLength;
  final bool isAmount;
  final Function onTap;

  MyTextFormField({
    this.labelText,
    this.validator,
    this.onSaved,
    this.maxLines = 1,
    this.maxLength = 30,
    this.isAmount = false,
    this.onTap,
});

  @override
  Widget build(BuildContext context) {
    return TextFormField(
      maxLines: maxLines,
      maxLength: maxLength,
      validator: validator,
      onSaved: onSaved,
      onTap: onTap,
      keyboardType: isAmount ? TextInputType.number : TextInputType.text,
      decoration: InputDecoration(
        border: OutlineInputBorder(
          borderRadius: BorderRadius.circular(25.0),
        ),
        labelText: labelText,
      ),
    );
  }
}

这是我现在获得的代码的一部分：

          //Steps
          Padding(
            padding: const EdgeInsets.all(8.0),
            child: MyTextFormField(
              labelText: "Step 1",
            ),
          ),
          Center(
              child: RaisedButton(
                child: Text("Add step"),
                onPressed: () {
                  //Add new text input field
                },
              ),
          ),

完整代码可在此处找到：

https://codeshare.io/GkLqlO

Answer 1

使用整数来跟踪步数，并通过使用setState()

在按钮按下时对其进行更新

class AddRecipeForm extends StatefulWidget {
  @override
  _AddRecipeFormState createState() => _AddRecipeFormState();
}

class _AddRecipeFormState extends State<AddRecipeForm> {

  int numberOfSteps = 1;

  @override
  Widget build(BuildContext context) {
    //...
    return Form(
      key: _formKey,
      child: ListView(
        //...
          //Steps
          for(int i=0;i<numberOfSteps;i++)
            Padding(
              padding: const EdgeInsets.all(8.0),
              child: MyTextFormField(
                labelText: "Step ${i+1}",
              ),
            ),
          Center(
            child: RaisedButton(
              child: Text("Add step"),
              onPressed: () {
                setState(() {
                  numberOfSteps++;
                });
                //Add new text input field
              },
            ),
          ),
         //...
        ],
      ),
    );
  }
  //...
}

Answer 2

带有列表

cart

按下按钮时添加新的文本字段

2 个答案: