Flutter 之英雄联盟：打造个性化英雄资料卡

2024-02-17 00:15:59

Flutter 之英雄联盟：打造个性化英雄资料卡

对于每一位英雄联盟的忠实玩家来说，一定都对游戏中那些个性鲜明的英雄们如数家珍。为了让玩家能够更深入地了解英雄们的故事和技能，我们决定使用 Flutter 开发一款英雄联盟英雄资料卡应用程序。

1. 目录结构

项目的目录结构如下：

├── lib
│   ├── main.dart
│   ├── screens
│   │   ├── home_screen.dart
│   │   ├── hero_detail_screen.dart
│   ├── models
│   │   ├── hero.dart
│   ├── services
│   │   ├── hero_service.dart
│   ├── utils
│   │   ├── app_colors.dart
│   │   ├── app_text_styles.dart
│   ├── widgets
│   │   ├── hero_card.dart
│   │   ├── loading_indicator.dart
│   ├── generated
│   │   ├── l10n
│   │   │   ├── en.arb
│   │   │   ├── es.arb
│   │   │   ├── fr.arb
│   │   │   ├── pt.arb
│   ├── pubspec.yaml
├── assets
│   ├── images
│   │   ├── hero_portraits
│   │   │   ├── ahri.png
│   │   │   ├── akali.png
│   │   │   ├── amumu.png
│   │   │   ├── annie.png
│   │   │   ├── ...
│   ├── fonts
│   │   ├── roboto_regular.ttf
│   │   ├── roboto_bold.ttf
├── test
│   ├── widget_test.dart
├── .gitignore
├── README.md
├── CHANGELOG.md
├── LICENSE
├── pubspec.lock

2. 英雄列表

英雄列表是应用程序的主页，它展示了游戏中所有英雄的名称、肖像和简短。

class HomeScreen extends StatelessWidget {
  const HomeScreen({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('英雄联盟英雄资料卡'),
      ),
      body: FutureBuilder<List<Hero>>(
        future: HeroService.getHeroes(),
        builder: (context, snapshot) {
          if (snapshot.hasData) {
            final heroes = snapshot.data!;

            return ListView.builder(
              itemCount: heroes.length,
              itemBuilder: (context, index) {
                final hero = heroes[index];

                return HeroCard(
                  hero: hero,
                  onTap: () => Navigator.push(
                    context,
                    MaterialPageRoute(
                      builder: (context) => HeroDetailScreen(hero: hero),
                    ),
                  ),
                );
              },
            );
          } else if (snapshot.hasError) {
            return Center(
              child: Text(snapshot.error.toString()),
            );
          } else {
            return const Center(
              child: LoadingIndicator(),
            );
          }
        },
      ),
    );
  }
}

3. 英雄详情页面

英雄详情页面展示了英雄的详细信息，包括英雄的故事、技能、属性和皮肤。

class HeroDetailScreen extends StatelessWidget {
  const HeroDetailScreen({Key? key, required this.hero}) : super(key: key);

  final Hero hero;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('${hero.name} 资料卡'),
      ),
      body: SingleChildScrollView(
        child: Column(
          children: [
            HeroImage(hero: hero),
            const SizedBox(height: 24),
            Padding(
              padding: const EdgeInsets.symmetric(horizontal: 16),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Text(
                    hero.name,
                    style: AppTextStyles.title1,
                  ),
                  const SizedBox(height: 8),
                  Text(
                    hero.title,
                    style: AppTextStyles.subtitle1,
                  ),
                  const SizedBox(height: 16),
                  Text(
                    hero.lore,
                    style: AppTextStyles.body1,
                  ),
                  const SizedBox(height: 16),
                  Text(
                    '技能',
                    style: AppTextStyles.title2,
                  ),
                  const SizedBox(height: 8),
                  ...hero.abilities
                      .map((ability) => AbilityCard(ability: ability))
                      .toList(),
                  const SizedBox(height: 16),
                  Text(
                    '属性',
                    style: AppTextStyles.title2,
                  ),
                  const SizedBox(height: 8),
                  AttributeList(hero: hero),
                  const SizedBox(height: 16),
                  Text(
                    '皮肤',
                    style: AppTextStyles.title2,
                  ),
                  const SizedBox(height: 8),
                  SkinList(hero: hero),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}