Flutter开发：如何在首页标题旁添加头像图标（仿iOS App Store布局）

嘿，我来帮你搞定这个布局问题！要实现类似iOS App Store首页的标题+右侧头像效果，核心是用**Row组件**来替代原来单独的Text，这样就能在同一行放置标题文本和头像图标了。

具体修改步骤： #

原来的代码里，Home标题是单独的Text组件，我们把它包裹到Row中，同时加入头像组件，通过mainAxisAlignment控制两者的对齐方式：

1. 替换原有的Text('Home')部分为以下代码：

Row(
  mainAxisAlignment: MainAxisAlignment.spaceBetween, // 让标题左对齐、头像右对齐
  children: [
    Text(
      'Home',
      style: TextStyle(
        color: Colors.white,
        fontSize: 50,
        fontWeight: FontWeight.bold,
      ),
    ),
    // 自定义头像组件，你可以根据需求替换
    CircleAvatar(
      radius: 25, // 调整头像大小，适配标题字号
      // 示例：使用网络头像
      backgroundImage: NetworkImage('https://example.com/your-avatar-url.jpg'),
      // 如果是本地资源，替换为：AssetImage('assets/your-avatar.png')
      backgroundColor: Colors.grey[200], // 加载前的占位背景色
    ),
  ],
),

2. 其他代码保持不变，这样就能实现标题左侧、头像右侧的布局效果了。

修改后的完整代码片段： #

return MaterialApp(
  debugShowCheckedModeBanner: false,
  home: Scaffold(
    resizeToAvoidBottomPadding: false,
    body: Container(
      width: double.infinity,
      decoration: BoxDecoration(
        gradient: LinearGradient(
          colors: [
            Colors.blue[900],
            Colors.blue[300],
          ],
        ),
      ),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          SizedBox(height: 30),
          Padding(
            padding: EdgeInsets.all(20),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: <Widget>[
                SizedBox(height: 20),
                // 这里是修改后的Row布局
                Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    Text(
                      'Home',
                      style: TextStyle(
                        color: Colors.white,
                        fontSize: 50,
                        fontWeight: FontWeight.bold,
                      ),
                    ),
                    CircleAvatar(
                      radius: 25,
                      backgroundImage: NetworkImage('https://example.com/avatar.jpg'),
                      backgroundColor: Colors.grey[200],
                    ),
                  ],
                ),
                SizedBox(height: 50),
                Container(
                  padding: EdgeInsets.fromLTRB(80, 110, 80, 0),
                  decoration: BoxDecoration(
                    borderRadius: BorderRadius.all(
                      Radius.circular(20),
                    ),
                    color: Colors.white,
                  ),
                ),
                SizedBox(height: 30),
                Container(
                  padding: EdgeInsets.fromLTRB(80, 110, 80, 0),
                  decoration: BoxDecoration(
                    borderRadius: BorderRadius.all(
                      Radius.circular(20),
                    ),
                    color: Colors.white,
                  ),
                ),
                SizedBox(height: 30),
                Container(
                  padding: EdgeInsets.fromLTRB(80, 110, 80, 0),
                  decoration: BoxDecoration(
                    borderRadius: BorderRadius.all(
                      Radius.circular(20),
                    ),
                    color: Colors.white,
                  ),
                ),
              ],
            ),
          ),
        ],
      ),
    ),
    bottomNavigationBar: BottomNavigationBar(
      currentIndex: currentIndex,
      backgroundColor: Colors.white,
      iconSize: 35,
      items: [
        BottomNavigationBarItem(
          icon: Icon(Icons.home),
          title: Text('Home'),
          backgroundColor: Colors.blue,
        ),
        BottomNavigationBarItem(
          icon: Icon(Icons.settings),
          title: Text('Settings'),
          backgroundColor: Colors.blue,
        ),
      ],
      onTap: (index) {
        setState(() {
          currentIndex = index;
        });
      },
    ),
    floatingActionButton: Container(
      height: 80,
      width: 80,
      child: FloatingActionButton(
        child: Icon(
          Icons.add,
          size: 40,
          color: Colors.black,
        ),
        backgroundColor: Colors.yellowAccent,
        onPressed: () {
          setState(() {
            Navigator.push(
              context,
              MaterialPageRoute(builder: (context) => AddRoom()),
            );
          });
        },
      ),
    ),
  ),
);

为什么之前的对齐方式没成功？ #

原来的布局中，Home标题是单独的Text组件，外层Column设置了CrossAxisAlignment.start，所以文本只能左对齐，无法在同一行放置右侧的头像。用Row组件可以将两个元素横向排列，通过mainAxisAlignment轻松控制它们的位置关系，完美解决你的需求。

内容的提问来源于stack exchange，提问作者Yogesh Prakash