分享学习成果是社交化学习的重要功能，用户可以将学习成就分享到社交平台。本文介绍如何实现一个分享成果页面，包括成就卡片展示、分享选项和邀请好友功能。

页面基础结构

定义分享成果页面：

class ShareScreen extends StatelessWidget {
  const ShareScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('分享学习成果')),
      body: SingleChildScrollView(
        padding: EdgeInsets.all(16.w),
        child: Column(
          children: [
            _buildShareCard(context),
            SizedBox(height: 20.h),
            _buildShareOptions(),
            SizedBox(height: 20.h),
            _buildInviteFriends(),
          ],
        ),
      ),
    );
  }

使用StatelessWidget构建页面，SingleChildScrollView让内容可以滚动。Column纵向排列三个区域：分享卡片、分享选项和邀请好友。SizedBox控制区域间距，让布局疏密有致。

分享卡片

构建顶部的成就展示卡片：

  Widget _buildShareCard(BuildContext context) {
    return Container(
      width: double.infinity,
      padding: EdgeInsets.all(24.w),
      decoration: BoxDecoration(
        gradient: const LinearGradient(
          colors: [Color(0xFF00897B), Color(0xFF4DB6AC)],
          begin: Alignment.topLeft,
          end: Alignment.bottomRight,
        ),
        borderRadius: BorderRadius.circular(16.r),
      ),

用渐变色背景和圆角装饰容器，渐变方向从左上到右下，营造立体感。width: double.infinity让容器占满宽度。这种设计让分享卡片成为页面的视觉焦点，适合截图分享。

成就图标和标题

显示奖杯图标和标题：

      child: Column(
        children: [
          Icon(Icons.emoji_events, size: 64.sp, color: Colors.amber),
          SizedBox(height: 16.h),
          Text(
            '我的学习成就',
            style: TextStyle(fontSize: 24.sp, fontWeight: FontWeight.bold, color: Colors.white),
          ),
          SizedBox(height: 8.h),
          Text(
            '已连续学习 15 天',
            style: TextStyle(fontSize: 16.sp, color: Colors.white70),
          ),
          SizedBox(height: 16.h),

奖杯图标用金色，大小64.sp非常醒目。标题用大字号粗体白色，副标题用中等字号半透明白色。在渐变背景上，白色文字清晰可读。这种层次设计突出了成就的重要性。

统计数据行

显示三个关键指标：

          Row(
            mainAxisAlignment: MainAxisAlignment.spaceAround,
            children: [
              _buildStatItem('学习词汇', '156'),
              _buildStatItem('获得积分', '1280'),
              _buildStatItem('解锁成就', '8'),
            ],
          ),
          SizedBox(height: 20.h),

用Row横向排列三个统计项，mainAxisAlignment.spaceAround让它们均匀分布。每个统计项包含标签和数值，调用_buildStatItem方法构建。这种数据展示让分享内容更丰富。

底部标语

显示应用宣传语：

          Container(
            padding: EdgeInsets.symmetric(horizontal: 16.w, vertical: 8.h),
            decoration: BoxDecoration(
              color: Colors.white.withOpacity(0.2),
              borderRadius: BorderRadius.circular(20.r),
            ),
            child: Text(
              '手语学习 - 让沟通无障碍',
              style: TextStyle(color: Colors.white, fontSize: 12.sp),
            ),
          ),
        ],
      ),
    );
  }

标语用半透明白色背景和圆角装饰，文字也是白色。这种玻璃态设计在渐变背景上很有质感。标语起到品牌宣传的作用，用户分享时也在传播应用。

统计项构建

封装统计项的构建逻辑：

  Widget _buildStatItem(String label, String value) {
    return Column(
      children: [
        Text(value, style: TextStyle(fontSize: 24.sp, fontWeight: FontWeight.bold, color: Colors.white)),
        Text(label, style: TextStyle(fontSize: 12.sp, color: Colors.white70)),
      ],
    );
  }

用Column纵向排列数值和标签，数值用大字号粗体白色，标签用小字号半透明白色。这种模块化设计让代码更易维护，三个统计项共用一个方法。

分享选项

构建分享平台选择区域：

  Widget _buildShareOptions() {
    final options = [
      {'icon': Icons.message, 'name': '微信', 'color': Colors.green},
      {'icon': Icons.people, 'name': '朋友圈', 'color': Colors.green[700]},
      {'icon': Icons.chat, 'name': 'QQ', 'color': Colors.blue},
      {'icon': Icons.link, 'name': '复制链接', 'color': Colors.grey},
      {'icon': Icons.image, 'name': '保存图片', 'color': Colors.orange},
      {'icon': Icons.more_horiz, 'name': '更多', 'color': Colors.purple},
    ];

定义6个分享选项，每个包含图标、名称和颜色。颜色与平台特征相关：微信绿色，QQ蓝色，保存图片橙色。这种数据驱动的方式便于添加或删除分享平台。

分享选项卡片

构建分享选项的容器：

    return Card(
      child: Padding(
        padding: EdgeInsets.all(16.w),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Text('分享到', style: TextStyle(fontSize: 16.sp, fontWeight: FontWeight.bold)),
            SizedBox(height: 16.h),

用Card包裹分享选项，标题用粗体显示。crossAxisAlignment.start让内容左对齐。这个区域提供多种分享方式，满足不同用户的分享需求。

网格布局

使用GridView显示分享选项：

            GridView.builder(
              shrinkWrap: true,
              physics: const NeverScrollableScrollPhysics(),
              gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                crossAxisCount: 4,
                crossAxisSpacing: 16.w,
                mainAxisSpacing: 16.h,
              ),
              itemCount: options.length,
              itemBuilder: (context, index) {
                final option = options[index];

GridView.builder创建网格布局，crossAxisCount: 4表示每行4列。shrinkWrap: true让GridView高度自适应内容，NeverScrollableScrollPhysics禁用滚动。这种网格布局整齐展示多个选项。

分享选项项

构建单个分享选项：

                return GestureDetector(
                  onTap: () => _showShareSuccess(context),
                  child: Column(
                    children: [
                      Container(
                        width: 48.w,
                        height: 48.w,
                        decoration: BoxDecoration(
                          color: (option['color'] as Color).withOpacity(0.1),
                          shape: BoxShape.circle,
                        ),
                        child: Icon(option['icon'] as IconData, color: option['color'] as Color),
                      ),
                      SizedBox(height: 4.h),
                      Text(option['name'] as String, style: TextStyle(fontSize: 11.sp)),
                    ],
                  ),
                );
              },
            ),
          ],
        ),
      ),
    );
  }

用GestureDetector处理点击，Column纵向排列图标和名称。图标用圆形容器包裹，背景色是平台颜色的半透明版本。点击显示分享成功提示。这种图标+文字的设计清晰易懂。

邀请好友

构建邀请好友区域：

  Widget _buildInviteFriends() {
    return Card(
      child: Padding(
        padding: EdgeInsets.all(16.w),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Text('邀请好友', style: TextStyle(fontSize: 16.sp, fontWeight: FontWeight.bold)),
            SizedBox(height: 12.h),
            Text('邀请好友一起学习手语，双方都可获得奖励！', style: TextStyle(fontSize: 13.sp, color: Colors.grey)),
            SizedBox(height: 16.h),

用Card包裹邀请功能，标题用粗体，说明文字用灰色。crossAxisAlignment.start让内容左对齐。这个区域鼓励用户邀请好友，实现用户增长。

邀请码

显示邀请码和复制按钮：

            Container(
              padding: EdgeInsets.all(12.w),
              decoration: BoxDecoration(
                color: Colors.grey[100],
                borderRadius: BorderRadius.circular(8.r),
              ),
              child: Row(
                children: [
                  Expanded(child: Text('SIGNLEARN2026', style: TextStyle(fontSize: 16.sp, fontWeight: FontWeight.bold))),
                  TextButton(onPressed: () {}, child: const Text('复制')),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }

邀请码用浅灰色背景和圆角装饰，Expanded让邀请码占据剩余空间，右侧放置复制按钮。邀请码用粗体显示，便于识别。这种一键复制的设计降低了分享门槛。

分享成功提示

显示SnackBar提示：

  void _showShareSuccess(BuildContext context) {
    ScaffoldMessenger.of(context).showSnackBar(
      const SnackBar(content: Text('分享成功！'), backgroundColor: Color(0xFF00897B)),
    );
  }
}

使用SnackBar显示分享成功提示，背景色用主题色。ScaffoldMessenger是Flutter推荐的显示SnackBar的方式，比旧的Scaffold.of更可靠。这种即时反馈让用户知道操作成功。

LinearGradient的方向

自定义渐变方向：

gradient: const LinearGradient(
  colors: [Color(0xFF00897B), Color(0xFF4DB6AC)],
  begin: Alignment.topLeft,
  end: Alignment.bottomRight,
),

begin和end参数控制渐变方向，从左上到右下形成对角线渐变。这比默认的水平渐变更有动感，让分享卡片更吸引眼球。

GridView的shrinkWrap

自适应高度：

GridView.builder(
  shrinkWrap: true,
  physics: const NeverScrollableScrollPhysics(),
  ...
)

shrinkWrap: true让GridView高度自适应内容，而不是占满父容器。NeverScrollableScrollPhysics禁用GridView自己的滚动，使用外层的SingleChildScrollView滚动。这种嵌套滚动的处理是常见需求。

颜色的语义化

不同平台使用不同颜色：

{'icon': Icons.message, 'name': '微信', 'color': Colors.green},
{'icon': Icons.chat, 'name': 'QQ', 'color': Colors.blue},
{'icon': Icons.image, 'name': '保存图片', 'color': Colors.orange},

微信用绿色，QQ用蓝色，保存图片用橙色。这些颜色与平台的品牌色或功能特征相关，用户看到颜色就能快速识别平台。

半透明背景

玻璃态设计：

decoration: BoxDecoration(
  color: Colors.white.withOpacity(0.2),
  borderRadius: BorderRadius.circular(20.r),
),

withOpacity(0.2)创建20%不透明度的白色，在渐变背景上形成半透明效果。这种玻璃态设计（Glassmorphism）是现代UI的流行趋势，有质感且不遮挡背景。

数据驱动的UI

根据数据动态生成UI：

final options = [
  {'icon': Icons.message, 'name': '微信', 'color': Colors.green},
  // ...
];
GridView.builder(
  itemCount: options.length,
  itemBuilder: (context, index) {
    final option = options[index];
    return GestureDetector(...);
  },
)

UI完全由数据驱动，修改数据就能改变显示。添加新的分享平台只需在数组中增加一项，不用修改UI代码。这种数据驱动的设计让代码更灵活。

SnackBar的使用

显示临时提示：

ScaffoldMessenger.of(context).showSnackBar(
  const SnackBar(content: Text('分享成功！'), backgroundColor: Color(0xFF00897B)),
);

SnackBar从底部弹出，几秒后自动消失。适合显示操作结果等临时信息。ScaffoldMessenger管理SnackBar的显示，即使Scaffold被移除也能正常显示。这是Flutter中显示提示的标准方式。

响应式布局

使用flutter_screenutil适配屏幕：

fontSize: 24.sp,
padding: EdgeInsets.all(24.w),
width: 48.w,
height: 48.w,

.sp用于字号，.w和.h用于尺寸和间距。这些单位会根据屏幕尺寸自动缩放，确保在不同设备上比例一致。一套代码适配所有屏幕。

小结

分享成果页面通过渐变色卡片展示学习成就，网格布局提供多种分享方式。邀请好友功能鼓励用户传播应用，SnackBar提供即时反馈。整体设计注重视觉吸引力和分享便利性，促进社交化学习。

---

欢迎加入开源鸿蒙跨平台社区：https://openharmonycrossplatform.csdn.net