如何使颤动的TextField高度匹配容器的父级？

Posted 2023-02-23

【中文标题】如何使颤动的TextField高度匹配容器的父级？

【英文标题】：How to make flutter TextField height match parent of container?

【发布时间】：2019-01-14 04:06:35

【问题描述】：

我想让我的TextField 高度与我的容器高度相同。请检查下面的代码，让我知道如何使TextField match_parent 成为我的容器。我已经检查了这个问题The equivalent of wrap_content and match_parent in flutter?，但我没有找到任何解决方案。我需要使TextField 占据容器的全高和全宽。

 new Container(
            height: 200.0,
            decoration: new BoxDecoration(
                border: new Border.all(color: Colors.black)
            ),

            child: new SizedBox.expand(
              child: new TextField(
                maxLines: 2,
                style: new TextStyle(
                    fontSize: 16.0,
                   // height: 2.0,
                    color: Colors.black
                ),
                  decoration: const InputDecoration(
                    hintText: "There is no data",
                    contentPadding: const EdgeInsets.symmetric(vertical: 40.0),
                  )
              ),
            ),
          )

请查看下面的屏幕截图。如前所述，我需要我的TextField 以达到Container 的全部高度

【问题讨论】：

The equivalent of wrap_content and match_parent in flutter?的可能重复

【参考方案1】：

让我们删除几行代码，了解一下 Flutter 的工作原理。

为什么我们将高度 200 分配给 Container。 Container 不能根据其子级调整高度（在本例中为 SizedBox.expand） 如果我们去掉高度200，那么Container占据了整个屏幕，因为SizedBox.expand 我们的用例是否真的需要SizedBox。让我们删除它，看看会发生什么。 现在我们的Container 包装了TextField。但是上面和下面都有一些空间。 谁决定了那个空间？ TextField 的装饰的 contentPadding。让我们也删除它。它看起来像下面由 Container 包裹的 textField。希望这是你想要的。如果没有，请发表评论，我们可以稍微调整一下，得到你想要的。干杯

显示上图的代码的最终版本

 new Container(
   //   height: 200.0,
      decoration: new BoxDecoration(
          border: new Border.all(color: Colors.black)
      ),

      child: new TextField(
          maxLines: 2,
          style: new TextStyle(
              fontSize: 16.0,
              // height: 2.0,
              color: Colors.black
          ),
          decoration: const InputDecoration(
            hintText: "There is no data",
//                contentPadding: const EdgeInsets.symmetric(vertical: 40.0),
          )
      ),
    )

【讨论】：

谢谢@Dinesh，实际上我需要一个固定高度的Container 并让我的TextFiled 达到这个高度。

嗨，Ammy，你的 TextField 高度如何？

目前我正在使用maxline 属性为TextField 赋予高度，但这不是一个好习惯。

知道了.. 1) 它与 fontSize 高度耦合。 2）我不确定如果您更换设备（如平板电脑，iPad）是否会影响。目前，它解决了这个问题。关注以上两个问题。

你们两个找到解决办法了吗？我无法使 TextField 自动调整其高度以适应灵活高度的容器。

【参考方案2】：

这是我的解决方案：

Container(
            height: 200,
            color: Color(0xffeeeeee),
            padding: EdgeInsets.all(10.0),
            child: new ConstrainedBox(
              constraints: BoxConstraints(
                maxHeight: 200.0,
              ),
              child: new Scrollbar(
                child: new SingleChildScrollView(
                  scrollDirection: Axis.vertical,
                  reverse: true,
                  child: SizedBox(
                    height: 190.0,
                    child: new TextField(
                      maxLines: 100,
                      decoration: new InputDecoration(
                        border: InputBorder.none,
                        hintText: 'Add your text here',
                      ),
                    ),
                  ),
                ),
              ),
            ),
          ),

对我来说效果很好。这是一个屏幕截图。

【参考方案3】：

目前实现TextField填充可用垂直空间的唯一方法是：

TextField(maxLines: 1000000) //maxlines: any large int

虽然使用TextField(maxLines: null) 很诱人，但它只会将TextField 设置为随其内容扩展，直到达到其容器限制。

我认为需要有一个bool stretchVertically 参数。 TextField(stretchVertically: true) 意味着TextField 将尝试尽可能多地填充垂直空间。 stretchVertically 和 maxLines 必须是互斥的。

【参考方案4】：

在 2021 年回答这个问题。现在有一个 expands 属性可用。此代码有效：

Column(
  children: [
    Expanded(
        child: TextField(
          maxLines: null, 
          minLines: null, 
          expands: true,
        ), 
        flex: 1),
  ],
)