简体   繁体   English

Flutter:TextFormField 和 RaisedButton alignment 在同一行

[英]Flutter: TextFormField and RaisedButton alignment on the same row

At the bottom of the screen, coupon code text form field and the apply button has mis-alignment.在屏幕底部,优惠券代码文本表单字段和申请按钮有错位。 How do I set them these widgets with the same height and align perfectly?如何将它们设置为具有相同高度并完美对齐的这些小部件?

在此处输入图像描述

      Row(
        mainAxisAlignment: MainAxisAlignment.end,
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          Container(
            width: 150,
            //color: Colors.blue,
            child: TextFormField(
              decoration: new InputDecoration(
                hintText: 'Coupon Code',
                contentPadding: EdgeInsets.all(8),
                isDense: true,
                border: new OutlineInputBorder(
                    borderSide: new BorderSide(color: Colors.grey)),
              ),
            ),
          ),
          Container(
            //color: Colors.green,
            padding: EdgeInsets.fromLTRB(15, 0, 0, 15),
            child: RaisedButton(
              onPressed: () {},
              color: Colors.grey[400],
              textColor: Colors.black,
              child: Text('Apply', style: TextStyle(fontSize: 12)),
            ),

          ),
        ],
      )

Actually I think you will find that this is going to have a better result.其实我想你会发现这样会有更好的结果。

Container(
              padding: EdgeInsets.only(top: 8),
              width: 150,
              //color: Colors.blue,
              child: TextFormField(
                decoration: new InputDecoration(
                  hintText: 'Coupon Code',
                  contentPadding: EdgeInsets.all(8),
                  isDense: true,
                  border: new OutlineInputBorder(
                      borderSide: new BorderSide(color: Colors.grey)),
                ),
              ),
            ),

Let me know how this works for you让我知道这对你有用

I also struggled with this until I found this post:在找到这篇文章之前,我也为此苦苦挣扎:

In Flutter, how to make Buttons and Textfields of same height? 在 Flutter 中,如何使 Buttons 和 Textfields 高度相同?

I still don't understand why the TextField widget does not properly size to it's parent unless the Expands option is enabled, which then excludes the ability to use ObstrucedText option.我仍然不明白为什么 TextField 小部件无法正确调整其父级的大小,除非启用了 Expands 选项,然后排除了使用 ObstrucedText 选项的能力。

Here is a post related to managing sizes of text and widgets across many different devices:这是一篇与跨许多不同设备管理文本和小部件大小相关的帖子:

How to make flutter app responsive according to different screen size? 如何使 flutter 应用程序根据不同的屏幕尺寸响应?

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM