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：在我共享容器宽度和高度的代码块中是无限的，所以如果我试图用SizedBox.expand它不工作来包围它。

标签： flutterdartheightwidthflutter-widget

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