AppBar中的分隔线没有出现

Posted 2023-04-13

【中文标题】AppBar中的分隔线没有出现

【英文标题】：Divider in AppBar not appearing

【发布时间】：2020-09-14 01:29:17

【问题描述】：

我很难弄清楚为什么我的应用栏中的分隔线没有出现。当我增加分隔线的高度时，我注意到我的小部件向上移动。我查看了类似的问题，但没有一个有效。我的 appBar 由两列和一行组成，用于用户个人资料信息和有关其“合作伙伴”的信息。我想使用分隔符将合作伙伴名称和用户名与赢/输比率分开。strong text

  Widget build(BuildContext context) 
    final user = Provider.of<User>(context);
    return  Scaffold( 
      appBar: AppBar( 
        backgroundColor: Color(0xFF2430346),
        bottom: PreferredSize(
          preferredSize: const Size.fromHeight(100.0),
          child: Row(
            children: <Widget>[
              Expanded(
                child: Padding(
                  padding: const EdgeInsets.only(left:20.0),
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: <Widget>[
                      _buildUserInfo(user),
                      Text(
                        "@username",
                        style: new TextStyle(
                          fontSize: 14,
                          fontWeight: FontWeight.w600,
                          color: Colors.white,
                        )
                      )
                    ],
                  ),
                ),
              ),
              Padding(
                padding: const EdgeInsets.only(right:70.0),
                child: Expanded(
                  child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: <Widget>[
                    Text(
                      "My Partner",
                      style: new TextStyle(
                        fontSize: 24,
                        fontWeight: FontWeight.w600,
                        color: Colors.white,
                      ), 
                    ),
                    Text(
                      "Dorian",
                      style: new TextStyle(
                        color: Colors.white,
                      ),
                    ),
                    Text(
                      "@Doetheman",
                      style: new TextStyle(
                        color: Colors.white,
                      ),
                    ),
                    // Mfer aint appearing
                    Padding(
                      padding: const EdgeInsets.only(left: 16, right: 16, top: 10, bottom: 10),
                      child: Divider(
                        height: 2.0,
                        color: Colors.white,
                    ),
                    ),
                  ],
                ),
                ),
              ),
            ],
          ),
      ),
  ),
), 

Widget _buildUserInfo(User user) 
    return Column(
      children: [
        Avatar(
          photoUrl: user.photoUrl,
          radius: 40,
          borderColor: Colors.black54,
          borderWidth: 2.0,
        ),
        const SizedBox(height: 8),
        if (user.displayName != null)
          Text(
            user.displayName,
            style: TextStyle(color: Colors.white),
          ),
        const SizedBox(height: 8),
      ],
    );
  

我希望它看到的内容： enter image description here

【问题讨论】：

你能添加一张你想要达到的目标的图片吗？

我猜..这是由于您在Divider周围给出的Padding..尝试删除它..

我还是没有出现。我可以提供我想要的照片。

【参考方案1】：

你可以使用这样的容器来代替分隔符

Container(
        alignment: Alignment.center,
        width: 250,
        height: 1,
        color: Colors.black
    ),

【参考方案2】：

使用IntrinsicWidth 小部件包装Column

IntrinsicWidth(
  child: Column(
    children: [
      // ....
      Divider(),
    ],
  ),
)