dart – 如何使flofter TextField高度匹配容器的父级？

2023年7月30日 300次阅读

我想让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来获取容器的全高度

《dart – 如何使flofter TextField高度匹配容器的父级？》

最佳答案 让我们删除代码中的几行,并了解flutter的工作原理.

>为什么我们给容器高度200. Container不能根据子节点调整高度(在本例中为SizedBox.expand)
>如果我们删除高度200,那么由于SizedBox.expand,Container占用了整个屏幕
>我们真的需要SizeBox用于我们的用例.让我们删除它也看看会发生什么.
>现在我们的Container包装了TextField.但是上面和下面都有一些空间.
>谁决定那个空间？ TextField的装饰的contentPadding.我们也删除它.它看起来像下面由Container包装的textField.希望这是你想要的.如果没有,请评论,我们可以调整一下,得到你想要的.干杯
《dart – 如何使flofter 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),
          )
      ),
    )
点赞