使用参数单击添加小部件

Question

我关注this stack post 以在点击时创建小部件。但是，由于我正在创建一个表单，我需要向新小部件发送一个参数，以便将问题标记为 1、2、3 等等。这是代码和执行剪辑：

import 'package:flutter/material.dart';

class CreateForms extends StatefulWidget{
  @override
  State<StatefulWidget> createState() => _CreateForms();

}

class _CreateForms extends State<CreateForms>{
  //final myController = TextEditingController();
  int _numQuestions = 1;

  @override
  Widget build(BuildContext context) {
    print("numQuestions first: $_numQuestions");
    List<Widget> _questions = new List.generate(_numQuestions, (int i) => new Question(_numQuestions));
    return Scaffold(
      backgroundColor: Colors.white,
      body: Container(
        padding: new EdgeInsets.all(30.0),
        width: double.infinity,
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            SizedBox(height: 20),
            _displayTitle(),
            new Container(
              height: 200.0,
              child: new ListView(
                children: _questions,
                scrollDirection: Axis.vertical,
              ),
            ),
            new FlatButton(
              onPressed: (){
                setState(() {
                  _numQuestions++;
                });
              },
              child: new Icon(Icons.add),
            ),
            SizedBox(height: 20),
            const Divider(
              color: Colors.black,
              height: 20,
              thickness: 1,
              indent: 20,
              endIndent: 0,
            ),
            Row(
              children: <Widget>[
                new Expanded(child: FlatButton(
                  onPressed: () {
                    //return to prev window
                    Navigator.pop(context);
                  },
                  padding: EdgeInsets.symmetric(vertical: 10),
                  child: Text('Cancel', style: TextStyle(fontSize: 20.0)),
                ), flex: 2),
                new Expanded(child: RaisedButton(
                  child: Text('Create form', style: TextStyle(fontSize: 20.0, fontWeight: FontWeight.bold)),
                  onPressed: () {
                    //return to prev window with task text
                    Navigator.pop(context/*, myController.text*/);
                  },
                ), flex: 3)
              ],
            )
          ],
        ),
      ),
    );
  }

  _displayTitle(){
    return TextField(
      maxLines: null,
      autofocus: true,
      decoration: InputDecoration(
          border: InputBorder.none,
          hintText: 'Form title'
      ),
      style: TextStyle(
          color: Colors.black,
          fontSize: 20,
          fontWeight: FontWeight.bold
      ),
    );
  }
}

class Question extends StatefulWidget {
  int _numQuestions;
  Question(int numQuestions){
    print("numQuestions: $_numQuestions");
    this._numQuestions = _numQuestions;
  }

  @override
  State<StatefulWidget> createState() => new _Question(_numQuestions);
}

class _Question extends State<Question> {
  int _numQuestions;
  _Question(int numQuestions){
    this._numQuestions = _numQuestions;
  }

  @override
  Widget build(BuildContext context) {
    return new TextFormField(
      maxLines: null,
      decoration: InputDecoration(
        border: InputBorder.none,
        hintText: 'Question title',
        isDense: true,
        prefixIcon:Text(_CreateForms()._numQuestions.toString() + ". "),
        prefixIconConstraints: BoxConstraints(minWidth: 0, minHeight: 0),
      ),
    );
  }
}

问题：

如何正确地用对应的数字标记每个新问题？ 我尝试删除prefixIcon:Text(_CreateForms()._numQuestions.toString() + ". "), 中的_CreateForms()，但随后显示的数字为“null”

额外问题：如果我删除 height: 200.0,，为什么所有内容都会消失？

编辑：要解决这个问题，Question 和 _Question 类的构造函数应该是：

_Question(int numQuestions){
    this._numQuestions = numQuestions;
  }

而不是

_Question(int numQuestions){
    this._numQuestions = _numQuestions;
  }

Answer 1

你应该做的 List<Widget> _questions = new List.generate(_numQuestions, (int i) => new Question(i)); 而不是 Question(_numQuestions)); 列表视图消失了，因为它需要一个固定的高度，也许用 Expanded 而不是 Container 包装列表视图会有所帮助。 另外，您可以在脚手架内添加resizeToAvoidBottomPadding: false，以避免在打开键盘时出现黄色条带。