如何使Flutter的TextField高度与容器的父元素匹配？

Question

我想让我的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的全高。

- Ammy Kang

---

可能是重复的问题 在Flutter中相当于wrap_content和match_parent的东西是什么？ - Ahmet Zorer

Answer 1

这是我的解决方案：

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',
                      ),
                    ),
                  ),
                ),
              ),
            ),
          ),

对我来说它运行得非常好。以下是一张屏幕截图。

- Jack Sun

Answer 2

回答于2021年。现在有一个名为expands的属性可用。以下代码有效:

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

- SayantanRC

Answer 3

让我们删除一些代码并了解Flutter的工作原理。

1. 为什么我们要给Container一个高度为200。难道Container不能根据其子元素（在本例中为SizedBox.expand）自适应高度吗？
2. 如果我们去掉高度为200，那么由于SizedBox.expand，Container将占据整个屏幕。
3. 对于我们的用例，我们真的需要SizedBox吗？让我们也把它删除看看会发生什么。
4. 现在我们的Container包裹着TextField。但是上下有一些空间。
5. 谁决定了这个空间？是TextField的装饰contentPadding。让我们也删除它。它看起来像下面这样，其中textField被Container包裹。希望这是你想要的。如果不是，请评论，我们可以微调并得到你想要的结果。干杯！

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

 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 Balasubramanian

---

嗨，Ammy，你是如何给你的TextField设置高度的？ - Dinesh Balasubramanian

1. 这与字体大小高度耦合。
2. 我不确定更改设备（如平板电脑、iPad）是否会受到影响。目前，它解决了问题。请注意以上两个问题。

- Dinesh Balasubramanian

是的，我知道可能会出现问题，这只是暂时的解决方法，你能帮我吗？我需要让我的容器高度始终保持不变。 - Ammy Kang

让我们在聊天中继续这个讨论。 - Ammy Kang

你们俩找到解决方案了吗？我无法使TextField自动调整其高度以适应可变高度容器内。 - Luke Pighetti

Answer 4

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

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

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

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

- Alex.F