如何在Flutter中实现Facebook发帖界面？

以下是优化后的Flutter代码，更贴近目标UI的样式：

Column(
  children: [
    // 顶部用户信息栏
    Padding(
      padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 8),
      child: Row(
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          CircleAvatar(
            backgroundImage: NetworkImage(userAvatarUrl),
            radius: 24, // 调整头像大小匹配Facebook风格
          ),
          const SizedBox(width: 12),
          Expanded(
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Text(
                  userName,
                  style: const TextStyle(
                    fontSize: 16,
                    fontWeight: FontWeight.w600,
                  ),
                ),
                const SizedBox(height: 4),
                Row(
                  children: [
                    // "公开"权限按钮
                    MaterialButton(
                      padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 4),
                      shape: RoundedRectangleBorder(
                        borderRadius: BorderRadius.circular(20),
                        side: const BorderSide(color: Colors.grey),
                      ),
                      onPressed: () {},
                      child: const Row(
                        mainAxisSize: MainAxisSize.min,
                        children: [
                          Icon(Icons.public, size: 16, color: Colors.grey),
                          SizedBox(width: 4),
                          Text("公开", style: TextStyle(color: Colors.grey)),
                        ],
                      ),
                    ),
                    const SizedBox(width: 8),
                    // "好友"权限按钮
                    MaterialButton(
                      padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 4),
                      shape: RoundedRectangleBorder(
                        borderRadius: BorderRadius.circular(20),
                        side: const BorderSide(color: Colors.grey),
                      ),
                      onPressed: () {},
                      child: const Row(
                        mainAxisSize: MainAxisSize.min,
                        children: [
                          Icon(Icons.group, size: 16, color: Colors.grey),
                          SizedBox(width: 4),
                          Text("好友", style: TextStyle(color: Colors.grey)),
                        ],
                      ),
                    ),
                  ],
                ),
              ],
            ),
          ),
        ],
      ),
    ),
    // 发帖输入框
    Padding(
      padding: const EdgeInsets.symmetric(horizontal: 12),
      child: TextFormField(
        decoration: InputDecoration(
          hintText: "分享你的想法...",
          hintStyle: const TextStyle(fontSize: 16),
          border: OutlineInputBorder(
            borderRadius: BorderRadius.circular(24),
            borderSide: BorderSide.none,
          ),
          filled: true,
          fillColor: Colors.grey[100],
          contentPadding: const EdgeInsets.symmetric(horizontal: 16, vertical: 16),
        ),
        maxLines: null, // 支持多行输入
      ),
    ),
    const SizedBox(height: 12),
    // 分割线
    const Divider(height: 1, thickness: 1),
    // 底部功能按钮栏
    Padding(
      padding: const EdgeInsets.symmetric(vertical: 8),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceAround,
        children: [
          MaterialButton(
            onPressed: () {},
            child: const Row(
              mainAxisSize: MainAxisSize.min,
              children: [
                Icon(Icons.photo_library, color: Colors.green),
                SizedBox(width: 8),
                Text("照片/视频", style: TextStyle(color: Colors.grey)),
              ],
            ),
          ),
          MaterialButton(
            onPressed: () {},
            child: const Row(
              mainAxisSize: MainAxisSize.min,
              children: [
                Icon(Icons.event, color: Colors.orange),
                SizedBox(width: 8),
                Text("活动", style: TextStyle(color: Colors.grey)),
              ],
            ),
          ),
          MaterialButton(
            onPressed: () {},
            child: const Row(
              mainAxisSize: MainAxisSize.min,
              children: [
                Icon(Icons.emoji_emotions, color: Colors.purple),
                SizedBox(width: 8),
                Text("生活感悟", style: TextStyle(color: Colors.grey)),
              ],
            ),
          ),
        ],
      ),
    ),
  ],
)

关键调整说明 #

• 校准了头像尺寸、内外边距，还原Facebook的布局比例
• 给权限选择按钮添加圆角边框和对应图标，匹配原UI的交互样式
• 输入框设置为多行输入模式，背景色、圆角和提示文字均贴近官方设计
• 补充了底部功能按钮栏和分割线，完善整个发帖界面的完整结构

内容的提问来源于stack exchange，提问作者My Car