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

问题描述

我想实现设置文本宽度和高度的父大小。这是我尝试过的但无法正常工作：

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

在我使用了上面的代码之后，文本的宽度和高度仍然是wrap_content。（我通过为文本提供backgroundcolor进行了调查）。如何实现？

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

解决方法

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

,

您可以使用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,child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,children: <Widget>[
                Expanded(
                  child: GestureDetector(
                      onTap: () {
//                  _onPagerTabItemClicked(0);
                      },child: Container(
                        color: Colors.red,width: 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,child: Text("Günlük",style: TextStyle(
                                color: Colors.black,child: Container(
                        color: Colors.blue,);
  }

,

您应该为每个孩子加上Expanded。这是一个例子

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