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替换您的列，而不是使用alignment属性在文本字段中添加填充和边距

OR

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

在两种情况下，您都需要向textField添加填充以填充空白

使用TextField Flutter管理多屏尺寸

1 个答案: