键盘粉碎文本字段

Question

我正在学习在Flutter中进行编码，并重做我的一个Android / iOS应用。到目前为止，这大致就是用户界面的样子：

当我点击一个字段以打开键盘时，它将所有字段粉碎在一起。

我正在尝试确定处理此问题的最佳方法。我能想到解决的唯一方法是在打开键盘时不知何故没有所有字段和按钮被按下。但是，如果执行此操作，则当将数据输入到屏幕下方的字段时，这些字段将不可见。有解决这个问题的好方法吗？

这是此视图的代码：

class _CarbCalcState extends State<CarbCalc> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Carb Calculator'),
        backgroundColor: Colors.purple.shade700,
        leading: IconButton(
          icon: Icon(Icons.settings),
          onPressed: () {},
        ),
        actions: <Widget>[
          IconButton(
            icon: Icon(Icons.library_books),
            onPressed: () {},
          )
        ],
      ),
      body: Container(
        margin: EdgeInsets.only(top: 40.0, left: 20.0, right: 20.0),
        child: Column(
          children: <Widget>[
            NutrientValue(
              nutrientName: 'Protein',
              onChanged: (value) {
                print('Protein Changed');
              },
            ),
            NutrientValue(
              nutrientName: 'Fat',
              onChanged: (value) {},
            ),
            NutrientValue(
              nutrientName: 'Fiber',
              onChanged: (value) {},
            ),
            NutrientValue(
              nutrientName: 'Moisture',
              onChanged: (value) {},
            ),
            NutrientValue(
              nutrientName: 'Ash',
              onChanged: (value) {},
            ),
            SizedBox(
              height: 30.0,
            ),
            ButtonTheme(
              minWidth: double.infinity,
              height: 50,
              child: FlatButton(
                onPressed: () {},
                color: Colors.blue.shade700,
                child: Text(
                  'Calculate Carbs',
                  style: TextStyle(
                    fontSize: 20,
                  ),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

class NutrientValue extends StatelessWidget {
  NutrientValue({@required this.nutrientName, @required this.onChanged});

  final String nutrientName;
  final Function onChanged;

  @override
  Widget build(BuildContext context) {
    return Expanded(
        child: Row(
      children: <Widget>[
        Container(
          width: 90,
          child: Text(
            nutrientName,
            style: TextStyle(fontSize: 18.0),
          ),
        ),
        Expanded(
          child: TextField(
            keyboardType: TextInputType.numberWithOptions(
              signed: false,
              decimal: true,
            ),
            style: TextStyle(
              color: Colors.black,
              fontSize: 18.0,
            ),
            onChanged: this.onChanged,
            decoration: InputDecoration(
              hintText: 'Enter $nutrientName',
              hintStyle: TextStyle(
                color: Colors.grey,
              ),
              border: OutlineInputBorder(
                borderRadius: BorderRadius.all(
                  Radius.circular(15.0),
                ),
                borderSide: BorderSide.none,
              ),
              filled: true,
              fillColor: Colors.white,
            ),
          ),
        ),
      ],
    ));
  }
}

Answer 1

您有一个内部有多个扩展列的列，请注意空间是均匀分布的。当键盘缩小空间时，它们会一起移动。基本上，由于键盘的缘故，将输入字段放入Scrollview是一个好主意。您可以将SingleChildScrollView与Column一起使用，但是您需要将Expanded窗口小部件替换为Container，例如，或者仅使用纯文本字段。