flutter - 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。(我通过给文本赋予backgroundcolor进行了调查)。如何实现呢？

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

您可以通过将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,
          ),
        ),
      ),
    ),
  ),
);