flutter - 键盘粉碎文本字段

问题描述

我正在学习用 Flutter 编写代码并重做我的一个 Android/iOS 应用程序。到目前为止，这大致是 UI 的样子：

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

我正在尝试确定处理此问题的最佳方法是什么。我能想到的唯一解决方法是在键盘打开时以某种方式没有所有字段和按钮。但是，如果我这样做，那么在将数据输入其中时，屏幕下方的字段将不可见。有没有好的方法来处理这个？

这是此视图的代码：

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,
            ),
          ),
        ),
      ],
    ));
  }
}

标签： flutterflutter-layout

flutter - 键盘粉碎文本字段

问题描述

解决方案

推荐阅读