如何在Flutter中实现指定样式的欢迎界面？

要实现你想要的堆叠效果，核心用Stack组件就能搞定——它允许子组件重叠排列，完全适配你需要的图层堆叠需求。下面是具体实现步骤：

1. 配置资源文件 #

确保在pubspec.yaml里正确声明你的asset资源，否则图片无法加载：

flutter:
  assets:
    - assets/bottom_lines.png  # 替换成你的底部线条图片实际路径
    - assets/blue_bubble.png   # 替换成你的蓝色气泡图片实际路径
    - assets/orange_bubble.png # 替换成你的橙色气泡图片实际路径

2. 用Stack构建堆叠界面 #

按照图层从下到上的顺序添加子组件：最底层放底部线条，然后是蓝色气泡、橙色气泡，最后放文字（后添加的组件会覆盖在上方）。可以用Align或Positioned精准控制每个元素的位置：

import 'package:flutter/material.dart';

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        children: [
          // 最底层：底部线条，对齐屏幕底部
          Align(
            alignment: Alignment.bottomCenter,
            child: Image.asset(
              'assets/bottom_lines.png',
              fit: BoxFit.fitWidth, // 适配屏幕宽度
            ),
          ),
          // 第二层：蓝色气泡，用Positioned定位到设计位置
          Positioned(
            bottom: 80, // 距离底部的距离，按设计稿调整
            left: 30,   // 距离左侧的距离，按设计稿调整
            child: Image.asset('assets/blue_bubble.png'),
          ),
          // 第三层：橙色气泡，用Positioned定位到设计位置
          Positioned(
            bottom: 120, // 距离底部的距离，按设计稿调整
            right: 40,   // 距离右侧的距离，按设计稿调整
            child: Image.asset('assets/orange_bubble.png'),
          ),
          // 最上层：文字内容，居中显示
          const Align(
            alignment: Alignment.center,
            child: Column(
              mainAxisSize: MainAxisSize.min,
              children: [
                Text(
                  '欢迎使用',
                  style: TextStyle(
                    fontSize: 28,
                    fontWeight: FontWeight.bold,
                    color: Colors.black87,
                  ),
                ),
                SizedBox(height: 16),
                Text(
                  '开启你的专属旅程',
                  style: TextStyle(
                    fontSize: 16,
                    color: Colors.grey,
                  ),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}

3. 细节调整建议 #

• 若需要气泡有缩放/透明度效果，可给Image.asset添加transform或Opacity包装组件
• 文字的字体、颜色、间距可根据设计稿修改Text的style参数
• 若图片超出屏幕范围，可嵌套ClipRect组件裁剪多余部分

内容的提问来源于stack exchange，提问作者Bryar Laiq