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的整个高度

Answer 1

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

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

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

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

Answer 2

让我们删除代码中的几行，并了解flutter的工作原理。

我们为什么要给容器设置高度200。 Container无法根据其子项（在本例中为SizedBox.expand）调整高度
如果我们取消高度200，则Container会导致SizedBox.expand占据整个屏幕
我们的用例是否真的需要SizedBox？让我们删除它，同时查看会发生什么。
现在我们的Container包装了TextField。但是上方和下方都有一些空间。
谁决定了这个空间？ TextField装饰的contentPadding。让我们也删除它。它看起来像下面由容器包装的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),
          )
      ),
    )

Answer 3

这是我的解决方法：

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

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

Answer 4

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

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

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

4 个答案: