首页 > 解决方案 > 使用参数单击添加小部件

问题描述

我按照这个堆栈帖子在点击时创建小部件。但是,由于我正在创建一个表单,我需要向新小部件发送一个参数,以便将问题标记为 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),
      ),
    );
  }
}

问题:

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

额外的问题:如果我删除,为什么一切都会消失height: 200.0,

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

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

并不是

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

标签: androidflutterdartflutter-layout

解决方案


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


推荐阅读