flutter FittedBox width > 0不是真的,但仅适用于一个文本部件

js4nwp54  于 2023-05-19  发布在  Flutter
关注(0)|答案(1)|浏览(104)

好吧,这个很奇怪。我得到的FittedBox宽度> 0!= true,对于我的4个小部件列中的一个小部件。当我删除那个小部件,一个文本小部件,错误不会显示。奇怪的是,另一个小部件也是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,
        ),
    ),
),

这是第一个元素。当我把它拿出来的时候错误就消失了。我甚至试着缩小字体大小,还是什么都没有。但是当我硬编码文本时,错误消失了。我正在初始化userModel中的文本,小部件正在从树上的futurebuilder接收该文本。一个文本小部件,与其他小部件相似,怎么可能给予错误,而不是其他小部件。我甚至试图删除其他小部件,因为我认为这是垂直空间的问题,但事实并非如此。我甚至试着去掉阿凡达因为。。

d5vmydt9

d5vmydt91#

带有BoxFit.fitWidthFittedBox根据Text子节点的大小计算其宽度,而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 : ' '}"

相关问题