如何使flofter TextField高度匹配容器的父级?

问题描述 投票:4回答:2

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

enter image description here

dart flutter flutter-layout
2个回答
1
投票

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

  1. 为什么我们给容器高度200。不能Container根据其子项调整高度(在本例中为SizedBox.expand)
  2. 如果我们移除高度200,那么由于ContainerSizedBox.expand占据了整个屏幕
  3. 我们真的需要SizedBox用于我们的用例。让我们删除它也看看会发生什么。
  4. 现在我们的Container包裹了TextField。但是上面和下面都有一些空间。
  5. 谁决定那个空间? TextField的装饰的contentPadding。我们也删除它。它看起来像下面由Container包装的textField。希望这是你想要的。如果没有,请评论,我们可以调整一下,得到你想要的。干杯enter image description here

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

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

0
投票

这是我的解决方案:

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

它对我很有用。这是一个截屏。

enter image description here

© www.soinside.com 2019 - 2024. All rights reserved.