Flutter Appbar 标题灰色背景显示

Posted 2023-02-23

【中文标题】Flutter Appbar 标题灰色背景显示

【英文标题】：Flutter Appbar title grey background displaying

【发布时间】：2021-05-24 00:49:28

【问题描述】：

Flutter AppBar 自定义视图，在签名构建中以灰色背景覆盖标题小部件，调试构建其工作正常。

标题小部件自定义视图源代码分享如下，请查看。

_getAppbar(AppTheme themeData) 

return AppBar(
  titleSpacing: 0,
  centerTitle: false,
  leading: Container(
    //color: Colors.blue,
    margin: EdgeInsets.only(left: 15),
    child: CircleAvatar(
      radius: 30.0,
      child: SvgPicture.asset(
        "assets/svg/man.svg",
        width: 30,
        height: 30,
      ),
      //backgroundColor: Colors.red,
    ),
  ),
  title: Container(
    margin: EdgeInsets.only(left: 10),
    alignment: Alignment.centerLeft,
    color: Colors.transparent,
    child: Expanded(
        child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            mainAxisAlignment: MainAxisAlignment.start,
            children: <Widget>[
          Text(
            "Hi, Vikky",
            style: TextStyle(
                fontSize: 9,
                fontWeight: fontRegular,
                color: Color(themeData.headerNameColor)),
          ),
          Wrap(crossAxisAlignment: WrapCrossAlignment.center, children: [
            Icon(
              Icons.location_on,
              size: 12,
              color: Color(themeData.brandColor),
            ),
            Text(
              "Kuzhikkattu Moola",
              style: TextStyle(
                  fontSize: 12,
                  fontWeight: fontMedium,
                  color: Color(themeData.textColor)),
            )
          ]),
        ])),
  ),
  backgroundColor:Colors.transparent,
  elevation: 0,
);

调试构建工作正常，仅在签名构建中发布。

【参考方案1】：

此问题与 ParentDataWidget 的使用不正确有关，与颜色无关。 这个问题似乎只在发布模式下而不是在构建模式下

Container(
    margin: EdgeInsets.only(left: 10),
    alignment: Alignment.centerLeft,
    color: Colors.transparent,
    child: Expanded( //Issue is here Incorrect use of Expanded Widget
        child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            mainAxisAlignment: MainAxisAlignment.start,
            children: <Widget>[
          Text(
            "Hi, Vikky",
            style: TextStyle(
                fontSize: 9,
                fontWeight: fontRegular,
                color: Color(themeData.headerNameColor)),
          ),
          Wrap(crossAxisAlignment: WrapCrossAlignment.center, children: [
            Icon(
              Icons.location_on,
              size: 12,
              color: Color(themeData.brandColor),
            ),
            Text(
              "Kuzhikkattu Moola",
              style: TextStyle(
                  fontSize: 12,
                  fontWeight: fontMedium,
                  color: Color(themeData.textColor)),
            )
          ]),
        ])),
  ),

尝试通过替换小部件 - Expanded 来管理您的 UI。 通过这个链接：Incorrect use of Parent Data Widget

【讨论】：

这显然是原因。但是调试版本不记录此问题是不寻常的。这段代码也不应该在调试中工作。

谢谢。现在工作正常。