使用 TextField Flutter 管理多屏尺寸答案

【问题标题】：Manage multiscreen size with TextField Flutter使用 TextField Flutter 管理多屏尺寸
【发布时间】：2019-06-14 02:54:01
【问题描述】：

我想为我的 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，但是当我这样做时，我在屏幕底部有一个很大的空白区域，这不是我想要的。我该如何解决这个问题？

感谢您的帮助

【问题讨论】：

标签： flutter flutter-layout

【解决方案1】：

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

或

您可以使用SingleChildScrollView，正如您在问题中所说的那样

这两种情况都需要在 textField 中添加 padding 来填充空格

【讨论】：

我也找到了这个帖子，但是这个案例对我来说看起来很简单，我是一个错误，我测试了这些解决方案但没有成功。