FittedBox width > 0 不正确，但仅适用于一个文本小部件

Question

好的，这个很奇怪。我的 4 个小部件列中只有一个小部件的 FittedBox 宽度 > 0 != true。当我删除该小部件（文本小部件）时，错误不会显示。奇怪的是，其他小部件也是fittedBoxes 中的文本小部件。字面意思是一样的。这是代码。我主页的正文是带有标题的NestedScrollView

headerSliverBuilder: (_,__)=>[
          SliverToBoxAdapter(
            child: ProfileHeader(uid: widget.profileId),
          ),
          SliverPersistentHeader(
            pinned: true,
            delegate: ProfileScreenPersistentHeader(
              tabBar: ProfileTabbar(tabController: _tabController)
            )
          ),
        ],

问题出在ProfileHeader(uid: widget.profileId),。在这里我有一个构建：

return Container(
      //color: Colors.pink[100],
      padding: EdgeInsets.symmetric(horizontal: 16),
      child: Column(
        // ignore: missing_required_param
        children: [
          SizedBox(height:8),
          Heading( fullName: _fullName, userName: _userName,lastSeen: _lastActive, photoUrl: _photoUrl, ratingsList: _ratingsList, ),
          SizedBox(height:16),
          FollowAndMessageButtons(profileUid: widget.userModel.uid, ),
          NumbersSection(followerCount: _followerCount, followingCount: _followingCount, itemsSold: _itemsSold,),
          Description(description: _description, website: _website,)

        ]
       //have an if to check wether to show edit button or followbutton
      )
    );

Heading() 是更具体的问题所在，这里是标题：

  final String photoUrl;
  final String fullName;
  final String userName;
  final List<double> ratingsList;
  final String lastSeen;
  const Heading({Key key, @required this.photoUrl, @required this.fullName, 
    @required this.userName, @required this.ratingsList, @required this.lastSeen}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final double x = SizeConfig.blockSizeHorizontal * 100;
    final double y = SizeConfig.blockSizeVertical * 100;
    final cardColor = Theme.of(context).cardColor;
    final activeColor = Theme.of(context).accentColor;
    final highlightColor = Theme.of(context).highlightColor;
    final mainTextColor = Theme.of(context).primaryColor;
    return Container(
      child: Row(
        crossAxisAlignment: CrossAxisAlignment.center,
        mainAxisAlignment: MainAxisAlignment.start,
        children: [
          Container(
            padding: EdgeInsets.only(right: 16),
            child: CircleAvatar(
                radius: 0.1*x,
                backgroundColor: cardColor,
                backgroundImage: (photoUrl == null || photoUrl.isEmpty)
                ?AssetImage('lib/images/PP.png')
                :CachedNetworkImageProvider(photoUrl),
            ),
          ),
          Expanded(
            //flex: 3,
            child: 
            Column(
              //mainAxisSize: MainAxisSize.min,
              mainAxisAlignment: MainAxisAlignment.center,
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                FittedBox(
                  fit: BoxFit.fitWidth,
                  child: Text( 
                    "$fullName",
                    style: TextStyle(fontFamily: "Montserrat", fontWeight: FontWeight.w700, color: mainTextColor, fontSize: 16)
                  ),
                ),
                FittedBox(
                  fit: BoxFit.fitWidth,
                  child: Text(
                    "@$userName",
                    style: TextStyle(fontFamily: "Lekton", fontWeight: FontWeight.w600, color: mainTextColor, fontSize: 16)
                  ),
                ),
                FittedBox(
                  fit: BoxFit.fitWidth,
                  child: Row(
                    mainAxisSize: MainAxisSize.min,
                    mainAxisAlignment: MainAxisAlignment.start,
                    children: [
                      Icon(Icons.remove_red_eye, color: highlightColor, size: 11,),
                      SizedBox(width:1),
                      Text(
                        "Active $lastSeen",
                        style: TextStyle(fontFamily: "Montserrat", fontWeight: FontWeight.w500, color: highlightColor, fontSize: 10)
                      ),
                    ],
                  ),
                ),
                FittedBox(
                  fit: BoxFit.fitWidth,
                  child: Row(
                    crossAxisAlignment: CrossAxisAlignment.center,
                    mainAxisAlignment: MainAxisAlignment.start,
                    mainAxisSize: MainAxisSize.min,
                    children: [
                      //STARS HERE
                      StarsReadOnly(size: 12, rating: Services().average(ratingsList), spacing: 1),
                      SizedBox(width: 2),
                      Text("(${ratingsList.length})",
                        style: TextStyle(fontFamily: "Montserrat", fontWeight: FontWeight.w500, color: activeColor, fontSize: 12)
                      ),
                    ],
                  ),
                  //stars
                ),

              ],
            ),
          ),
        ],
      ),
    );
  }
}

给出错误的列中的子项是

FittedBox(
                  fit: BoxFit.fitWidth,
                  child: Text( 
                    "$fullName",
                    style: TextStyle(fontFamily: "Montserrat", fontWeight: FontWeight.w700, color: mainTextColor, fontSize: 16)
                  ),
                ),

这是第一个元素。当我把它拿出来时，错误消失了。我什至尝试减小字体大小，但仍然没有。但是当我对文本进行硬编码时，错误消失了。我正在从一个用户模型初始化文本，小部件从树的更远的未来构建器接收到该文本。一个文本小部件（与其他小部件相似）如何给出错误但其他小部件却不给出错误。我什至尝试删除其他小部件，因为我认为这是垂直空间的问题，但事实并非如此。我什至尝试删除circleavatar，因为......

Answer 1

FittedBox 和BoxFit.fitWidth 正在根据Text 子项的大小计算其宽度，这将基于String 的长度。从错误中可以看出，它要求计算的宽度大于 0。由于您是从 Future 加载 _fullName，它最初是空的。这导致宽度为 0，抛出错误。您在其他列中没有看到此问题，因为它们包含一些超出返回数据的文本，因此它们的宽度永远不会为 0。

有几种方法可以处理这个问题。一个更强大的解决方案是只显示包含数据的标题列/值。您也可以从每列中的初始（默认）值开始，直到加载数据，但如果任何实际值可能为空，这将不是一个很好的解决方案。

最简单的解决方案是在Text 小部件中的fullName 之后简单地添加一个空格，以便在数据返回之前String 不为空。

FittedBox(
              fit: BoxFit.fitWidth,
              child: Text( 
                "$fullName ",
                style: TextStyle(fontFamily: "Montserrat", fontWeight: FontWeight.w700, color: mainTextColor, fontSize: 16)
              ),
            ),

如果您想避免不必要的空格或避免相关的格式问题，请检查 fullName 的值，如果值为 null（或为空，取决于您的实现）替换空格。

// if the initial value is null
"${fullName ?? ' '}"

// or if the initial value is an empty String
"${fullName.isNotEmpty ? fullName : ' '}"