flutter - 使用 TextField Flutter 管理多屏尺寸

Question

我想为我的 Flutter 应用设计一个页面，该页面可以在所有屏幕设备上以相同的外观显示，而无需滚动查看页面底部。在下面的左图中，您可以看到我的代码的结果:

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        textTheme: TextTheme(
          headline: TextStyle(fontSize: 64.0),
          subhead: TextStyle(fontSize: 48.0),
          title: TextStyle(fontSize: 36.0),
          subtitle: TextStyle(fontSize: 24.0),
          button: TextStyle(fontSize: 24, color: Colors.white),
          body1: TextStyle(fontSize: 18.0, color: Colors.black),
          body2: TextStyle(fontSize: 14.0, color: Colors.black),
        ),
      ),
      home: Scaffold(
        body: Padding(
          padding: const EdgeInsets.symmetric(horizontal: 24.0),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            crossAxisAlignment: CrossAxisAlignment.stretch,
            children: <Widget>[
              Row(
                mainAxisAlignment: MainAxisAlignment.end,
                children: <Widget>[
                  Padding(
                    padding: const EdgeInsets.only(top: 16.0),
                    child: IconButton(
                      icon: Icon(Icons.settings),
                      onPressed: () {
                        Navigator.pushNamed(context, '/settings');
                      },
                    ),
                  ),
                ],
              ),
              Text(
                'My Title Here',
                textAlign: TextAlign.center,
                style: TextStyle(fontSize: 64.0),
              ),
              TextField(
                style: Theme.of(context).textTheme.body1,
              ),
              TextField(
                style: Theme.of(context).textTheme.body1,
              ),
              RaisedButton(child: Text('Start'), onPressed: () {}),
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                children: <Widget>[
                  IconButton(
                    icon: Icon(Icons.star),
                    onPressed: () {},
                  ),
                  IconButton(
                    icon: Icon(Icons.star),
                    onPressed: () {},
                  ),
                  IconButton(
                    icon: Icon(Icons.star),
                    onPressed: () {},
                  ),
                ],
              ),
            ],
          ),
        ),
      ),
    );
  }
}

它非常简单，而且看起来不错，但是当我点击第二个 TextField 时，我遇到了溢出问题，就像您在右图中看到的那样:(我在一个iPhone 5s)。

我测试添加一个 SingleChildScrollView，一个 SafeArea 但是当我这样做时，我在屏幕底部有一个很大的空白区域，这不是我想要的为了。我该如何解决这个问题？

谢谢你的帮助

Answer 1

您好，这是 Flutter repo 上的已关闭问题.用 ListView 替换您的列，而不是使用对齐属性，向您的文本字段添加填充和边距

或

您可以按照问题中的说明使用SingleChildScrollView

这两种情况都需要给textField添加padding来填充空白