flutter 文本宽度和高度匹配父级

Question

我想实现将文本宽度和高度设置为父级大小。这是我尝试过的方法，但它不起作用：

Container(
            height: double.infinity,
            child: Padding(
              padding: const EdgeInsets.only(left: 30, right: 30),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                crossAxisAlignment: CrossAxisAlignment.center,
                children: <Widget>[
                  GestureDetector(
                      onTap: () {
                        _onPagerTabItemClicked(0);
                      },
                      child: Container(
                        width: double.infinity,
                        height: double.infinity,
                        child: Text("Günlük",
                            style: TextStyle(color: getTextColor(0))),
                      )),
                  GestureDetector(
                      onTap: () {
                        _onPagerTabItemClicked(0);
                      },
                      child: Container(
                        width: double.infinity,
                        height: double.infinity,
                        child: Text("Günlük",
                            style: TextStyle(color: getTextColor(0))),
                      )),
                  GestureDetector(
                      onTap: () {
                        _onPagerTabItemClicked(0);
                      },
                      child: Container(
                        width: double.infinity,
                        height: double.infinity,
                        child: Text("Günlük",
                            style: TextStyle(color: getTextColor(0))),
                      )),
                ],
              ),
            ),
          ),

在我使用上面的代码之后，文本的宽度和高度仍然是 wrap_content。（我通过给文本赋予背景颜色来调查它）。如何实现？

ps :in the code block that i share the container width and height is infinite so if i try to surround it with SizedBox.expand its not working.

Answer 1

您可以使用 SizedBox.expand() 来实现此目的

                Container(
                  height: 200,
                  width: 200,
                  child: SizedBox.expand(
                    child: Text("Lorem ipsum"),
                  ),
                )

PS: 嗨，阿里，我明白你在找什么，但我认为这是不可能的，因为文本没有宽度或高度属性，它不像容器、列等，它不能像它们一样扩展。即使您在打开调试画图的情况下查看视图，您也看不到包围文本的线条。它看起来不像原生的 TextView android.

如果你想实现这一点，你需要像我对行的第一项所做的那样用容器包装它。因此，与其尝试制作“文本”match_parent，不如处理文本的包装。

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Container(
          color: Colors.white,
          height: double.infinity,
          child: Padding(
            padding: const EdgeInsets.only(left: 30, right: 30),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              crossAxisAlignment: CrossAxisAlignment.center,
              children: <Widget>[
                Expanded(
                  child: GestureDetector(
                      onTap: () {
//                  _onPagerTabItemClicked(0);
                      },
                      child: Container(
                        color: Colors.red,
                        width: double.infinity,
                        height: double.infinity,
                        child: Container(
                          color: Colors.purple, //here is the wrapper container
                          child: Text("Günlük",
                              style: TextStyle(
                                  color: Colors.black,
                                  backgroundColor: Colors.white)),
                        ),
                      )),
                ),
                Expanded(
                  child: GestureDetector(
                      onTap: () {
//                  _onPagerTabItemClicked(0);
                      },
                      child: Container(
                        color: Colors.green,
                        width: double.infinity,
                        height: double.infinity,
                        child: Text("Günlük",
                            style: TextStyle(
                                color: Colors.black,
                                backgroundColor: Colors.white)),
                      )),
                ),
                Expanded(
                  child: GestureDetector(
                      onTap: () {
//                  _onPagerTabItemClicked(0);
                      },
                      child: Container(
                        color: Colors.blue,
                        width: double.infinity,
                        height: double.infinity,
                        child: Text("Günlük",
                            style: TextStyle(
                                color: Colors.black,
                                backgroundColor: Colors.white)),
                      )),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }

Answer 2

您应该将每个 child 都用 Expanded 包装起来。这是一个例子

Container(
        height: double.infinity,
        color: Colors.blue,
        child: Padding(
          padding: const EdgeInsets.only(left: 30, right: 30),
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: <Widget>[
              Expanded(
                child: GestureDetector(
                    onTap: () {
                      print("red");
                    },
                    child: Container(
                      color: Colors.red,
                      width: double.infinity,
                      height: double.infinity,
                      child:
                      Text("Günlük", style: TextStyle(color: Colors.black)),
                    )),
              ),
              Expanded(
                child: GestureDetector(
                    onTap: () {
                      print("abmer");},
                    child: Container(
                      color: Colors.amber,
                      width: double.infinity,
                      height: double.infinity,
                      child:
                      Text("Günlük", style: TextStyle(color: Colors.black)),
                    )),
              ),
              Expanded(
                child: GestureDetector(
                    onTap: () {
                      print("green");},
                    child: Container(
                      color: Colors.green,
                      width: double.infinity,
                      height: double.infinity,
                      child:
                      Text("Günlük", style: TextStyle(color: Colors.black)),
                    )),
              ),
            ],
          ),
        ),
      )

Answer 3

您可以通过使用 fit: BoxFit.fill 将 Text 小部件包装在 FittedBox 中来实现此目的，以便它占据所有可用的 space.

Container(
    height: double.infinity,
    child: Padding(
      padding: const EdgeInsets.only(left: 30, right: 30),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: <Widget>[
          buildItem(Colors.red),
          buildItem(Colors.green),
          buildItem(Colors.blue),
        ],
      ),
    ),
  );

Widget buildItem(Color color) {
return Expanded(
  child: Container(
    height: double.infinity,
    color: color,
    child: FittedBox(
      fit: BoxFit.fill,
      alignment: Alignment.center,
      child: GestureDetector(
        onTap: (){},
        child: Text(
          "Günlük",
          textAlign: TextAlign.center,
          style: TextStyle(
            color: Colors.white,
          ),
        ),
      ),
    ),
  ),
);

flutter 文本宽度和高度匹配父级

flutter text width and height match parent

flutter

dart

height

width

flutter-widget