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。（我通过为文本提供backgroundcolor进行了调查）。如何实现？

ps：在我共享容器宽度和高度的代码块中，无限，因此如果我尝试将其用SizedBox.expand包围起来，将无法正常工作。

Answer 1

您可以通过用Text将FittedBox内的fit: BoxFit.fill小部件包装起来，使其占据所有可用空间来实现此目的。

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

Answer 2

您可以使用SizedBox.expand（）实现此目的

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

PS： 嗨，阿里，我了解您在寻找什么，但我认为这是不可能的，因为文本没有width或height属性，不是容器，列等之类的东西，它不能像它们那样扩展。即使您在打开调试画图的情况下查看视图，也不会看到包围Text的行。看起来它不像适用于本机android的TextView。

如果要实现这一点，则需要像我对行的第一项所做的那样，用一个容器包装它。因此，您不必尝试使“文本”作为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 3

您应该为每个孩子加上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)),
                    )),
              ),
            ],
          ),
        ),
      )

颤动文本的宽度和高度与父项匹配

3 个答案: