Dart 相对于居中的小部件定位小部件

我正在做一个登录页面。我希望电子邮件/密码文本字段在页面中居中，按钮位于最后一个字段下方48dp处（因此在计算文本字段的居中位置时不考虑）

我不知道如何修改布局，使按钮不包括在屏幕截图中当前显示的居中元素中：

我的代码：

class LoginScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      body: Row(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            Expanded(flex: 2, child: Container()),
            Expanded(
              flex: 8,
              child: Form(
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  crossAxisAlignment: CrossAxisAlignment.center,
                  children: [
                    RoundedTextField(
                      hintText: 'Email',
                      keyboardType: TextInputType.emailAddress,
                      textInputAction: TextInputAction.next,
                    ),
                    Container(
                      height: 12,
                    ),
                    RoundedTextField.password(
                      hintText: 'Password',
                      textInputAction: TextInputAction.go,
                    ),
                    Container(
                      height: 48,
                    ),
                    PrimaryButton(
                      child: Text('Log In'),
                      onPressed: () => print(null),
                    ),
                  ],
                ),
              ),
            ),
            Expanded(flex: 2, child: Container()),
          ]),
    );
  }
}

---

我来自Android开发的世界，在那里我们可以只做

约束tobottomof:@id/passwordField

，我不确定flex系统中是否真的有一个等价物。

最简单的解决方案是使用一个既不显示也不使用的按钮来维护simmetry：

class LoginScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      body: Row(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            Expanded(flex: 2, child: Container()),
            Expanded(
              flex: 8,
              child: Form(
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  crossAxisAlignment: CrossAxisAlignment.center,
                  children: [
                    Opacity(
                      opacity: 0.0,
                      child: RaisedButton(
                        child: Text(''),
                        onPressed: null,
                      ),
                    ),
                    Container(
                      height: 12,
                    ),
                    TextField(
                      decoration: InputDecoration(hintText: 'Email'),
                      keyboardType: TextInputType.emailAddress,
                      textInputAction: TextInputAction.next,
                    ),
                    Container(
                      height: 12,
                    ),
                    TextField(
                      decoration: InputDecoration(hintText: 'Password'),
                      textInputAction: TextInputAction.go,
                    ),
                    Container(
                      height: 48,
                    ),
                    RaisedButton(
                      child: Text('Log In'),
                      onPressed: () => print(null),
                    ),
                  ],
                ),
              ),
            ),
            Expanded(flex: 2, child: Container()),
          ]),
    );
  }
}

---

最简单的解决方案是使用一个既不显示也不使用的按钮来维护simmetry：

class LoginScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      body: Row(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            Expanded(flex: 2, child: Container()),
            Expanded(
              flex: 8,
              child: Form(
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  crossAxisAlignment: CrossAxisAlignment.center,
                  children: [
                    Opacity(
                      opacity: 0.0,
                      child: RaisedButton(
                        child: Text(''),
                        onPressed: null,
                      ),
                    ),
                    Container(
                      height: 12,
                    ),
                    TextField(
                      decoration: InputDecoration(hintText: 'Email'),
                      keyboardType: TextInputType.emailAddress,
                      textInputAction: TextInputAction.next,
                    ),
                    Container(
                      height: 12,
                    ),
                    TextField(
                      decoration: InputDecoration(hintText: 'Password'),
                      textInputAction: TextInputAction.go,
                    ),
                    Container(
                      height: 48,
                    ),
                    RaisedButton(
                      child: Text('Log In'),
                      onPressed: () => print(null),
                    ),
                  ],
                ),
              ),
            ),
            Expanded(flex: 2, child: Container()),
          ]),
    );
  }
}

---

有点像黑客，但您可以通过媒体查询设置高度：

double _height = MediaQuery.of(context).size.height * .5;

然后这样做：

body: Column(
        children: <Widget>[

          Container(
            height: _height,
            child: Column(
              mainAxisAlignment: MainAxisAlignment.end,
              children: <Widget>[
                TextField(
                  decoration: InputDecoration(
                    hintText: 'email@email.com',
                    labelText: 'Email',
                  ),
                ),
              ],
            ),
          ),

          Container(
            height: _height,
            child: Column(
              mainAxisAlignment: MainAxisAlignment.start,
              children: <Widget>[
                TextField(
                  decoration: InputDecoration(
                    hintText: 'email@email.com',
                    labelText: 'Email',
                  ),
                ),
                Padding(padding: EdgeInsets.only(top: 48.0)),
                Text('some button'),
              ],
            ),
          ),
        ],
      ),

body:Column(
儿童：[
容器(
高度：_高度，
子：列(
mainAxisAlignment:mainAxisAlignment.end，
儿童：[
文本字段(
装饰：输入装饰(
hintText:'email@email.com',
labelText:“电子邮件”，
),
),
],
),
),
容器(
高度：_高度，
子：列(
mainAxisAlignment:mainAxisAlignment.start，
儿童：[
文本字段(
装饰：输入装饰(
hintText:'email@email.com',
labelText:“电子邮件”，
),
),
填充（填充：仅限边集（顶部：48.0）），
文本（“某些按钮”），
],
),
),
],
),

有点像黑客，但您可以通过媒体查询设置高度：

double _height = MediaQuery.of(context).size.height * .5;

然后这样做：

body: Column(
        children: <Widget>[

          Container(
            height: _height,
            child: Column(
              mainAxisAlignment: MainAxisAlignment.end,
              children: <Widget>[
                TextField(
                  decoration: InputDecoration(
                    hintText: 'email@email.com',
                    labelText: 'Email',
                  ),
                ),
              ],
            ),
          ),

          Container(
            height: _height,
            child: Column(
              mainAxisAlignment: MainAxisAlignment.start,
              children: <Widget>[
                TextField(
                  decoration: InputDecoration(
                    hintText: 'email@email.com',
                    labelText: 'Email',
                  ),
                ),
                Padding(padding: EdgeInsets.only(top: 48.0)),
                Text('some button'),
              ],
            ),
          ),
        ],
      ),

body:Column(
儿童：[
容器(
高度：_高度，
子：列(
mainAxisAlignment:mainAxisAlignment.end，
儿童：[
文本字段(
装饰：输入装饰(
hintText:'email@email.com',
labelText:“电子邮件”，
),
),
],
),
),
容器(
高度：_高度，
子：列(
mainAxisAlignment:mainAxisAlignment.start，
儿童：[
文本字段(
装饰：输入装饰(
hintText:'email@email.com',
labelText:“电子邮件”，
),
),
填充（填充：仅限边集（顶部：48.0）），
文本（“某些按钮”），
],
),
),
],
),

此用例的常见解决方案是一列，其中一些扩展如下：

Column(
  children: [
    Expanded(),
    someContent,
    Expanded(
      child: someOffsetContent,
    ),
),

一个更直观的例子：（紫色是展开的）

列(
儿童：[
展开（子：容器（颜色：Colors.purple）），
纵队(
儿童：[
容器(
身高：42，
宽度：double.infinity，
颜色：颜色，红色，
),
容器(
身高：42，
宽度：double.infinity，
颜色：颜色，黄色，
),
],
),
扩大(
子：容器(
颜色：颜色，紫色，
对齐：alignment.topCenter，
填充：仅限常量边集（顶部：48），
子：容器(
颜色：颜色，红色，
身高：42.0，
宽度：double.infinity，
),
),
)
],
)

此用例的常见解决方案是一列，其中一些扩展如下：

Column(
  children: [
    Expanded(),
    someContent,
    Expanded(
      child: someOffsetContent,
    ),
),

一个更直观的例子：（紫色是展开的）

列(
儿童：[
展开（子：容器（颜色：Colors.purple）），
纵队(
儿童：[
容器(
身高：42，
宽度：double.infinity，
颜色：颜色，红色，
),
容器(
身高：42，
宽度：double.infinity，
颜色：颜色，黄色，
),
],
),
扩大(
子：容器(
颜色：颜色，紫色，
对齐：alignment.topCenter，
填充：仅限常量边集（顶部：48），
子：容器(
颜色：颜色，红色，
身高：42.0，
宽度：double.infinity，
),
),
)
],
)

这似乎不是一般的案例解决方案。如果我添加另一个文本字段，它现在会溢出底部，我必须开始使用flex值来修复它<例如，code>4/2/4在最后一个字段和按钮之间添加了比

4/3/4

更多的空间，我需要精确到48dp。你是对的。我已经用一个更简单的解决方案更新了我的答案。看起来有点粗糙，但它是一些开箱即用的想法，并且完成了工作。谢谢这似乎不是一个通用的案例解决方案。如果我添加另一个文本字段，它现在会溢出底部，我必须开始使用flex值来修复它<例如，code>4/2/4在最后一个字段和按钮之间添加了比

4/3/4

更多的空间，我需要精确到48dp。你是对的。我已经用一个更简单的解决方案更新了我的答案。看起来有点粗糙，但它是一些开箱即用的想法，并且完成了工作。谢谢