AppBar中的分隔符未出现

问题描述 投票:0回答:1

我正在努力弄清为什么我的应用程序栏中的分隔线没有出现。当我增加分隔线的高度时,我注意到我的小部件向上移动。我看过类似的问题,但都没有奏效。我的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

flutter dart flutter-layout divider
1个回答
0
投票

代替分隔符,您可以使用这样的容器

Container(
        alignment: Alignment.center,
        width: 250,
        height: 1,
        color: Colors.black
    ),
© www.soinside.com 2019 - 2024. All rights reserved.