Flutter实现页面跳转按钮与宠物卡片列表及详情页方案

以下是满足你需求的完整实现代码，包含页面跳转按钮、宠物卡片增删以及详情页跳转功能：

1. 定义宠物数据模型 #

class Pet {
  final String nickname;
  final String gender;
  final int age;

  Pet({required this.nickname, required this.gender, required this.age});
}

2. 修改并完善 InfoPage #

import 'package:flutter/material.dart';

class InfoPage extends StatefulWidget {
  const InfoPage({super.key});

  @override
  State<InfoPage> createState() => _InfoPageState();
}

class _InfoPageState extends State<InfoPage> {
  // 存储宠物列表
  final List<Pet> _pets = [];

  // 打开添加宠物的弹窗
  void _showAddPetDialog() {
    final nicknameController = TextEditingController();
    final genderController = TextEditingController();
    final ageController = TextEditingController();

    showDialog(
      context: context,
      builder: (context) => AlertDialog(
        title: const Text('添加新宠物'),
        content: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            TextField(
              controller: nicknameController,
              decoration: const InputDecoration(labelText: '昵称'),
            ),
            TextField(
              controller: genderController,
              decoration: const InputDecoration(labelText: '性别'),
            ),
            TextField(
              controller: ageController,
              decoration: const InputDecoration(labelText: '年龄'),
              keyboardType: TextInputType.number,
            ),
          ],
        ),
        actions: [
          TextButton(
            onPressed: () => Navigator.pop(context),
            child: const Text('取消'),
          ),
          TextButton(
            onPressed: () {
              if (nicknameController.text.isNotEmpty &&
                  genderController.text.isNotEmpty &&
                  ageController.text.isNotEmpty) {
                setState(() {
                  _pets.add(Pet(
                    nickname: nicknameController.text,
                    gender: genderController.text,
                    age: int.parse(ageController.text),
                  ));
                });
                Navigator.pop(context);
              }
            },
            child: const Text('添加'),
          ),
        ],
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Информация о ваших питомцах'),
        // 添加跳转至其他页面的按钮
        actions: [
          IconButton(
            icon: const Icon(Icons.arrow_forward),
            onPressed: () {
              // 替换成你需要的目标页面
              Navigator.push(
                context,
                MaterialPageRoute(builder: (context) => const OtherPage()),
              );
            },
          ),
        ],
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _showAddPetDialog,
        child: const Icon(Icons.add),
      ),
      body: Padding(
        padding: const EdgeInsets.all(25.0),
        child: _pets.isEmpty
            ? const Center(child: Text('暂无宠物，点击"+"添加'))
            : ListView.builder(
                itemCount: _pets.length,
                itemBuilder: (context, index) {
                  final pet = _pets[index];
                  // 用InkWell实现卡片点击跳转
                  return InkWell(
                    onTap: () {
                      Navigator.push(
                        context,
                        MaterialPageRoute(
                          builder: (context) => PetDetailPage(pet: pet),
                        ),
                      );
                    },
                    child: Card(
                      margin: const EdgeInsets.symmetric(vertical: 10),
                      child: Padding(
                        padding: const EdgeInsets.all(16.0),
                        child: Column(
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: [
                            Text(
                              pet.nickname,
                              style: const TextStyle(
                                fontSize: 18,
                                fontWeight: FontWeight.bold,
                              ),
                            ),
                            const SizedBox(height: 8),
                            Text('性别: ${pet.gender}'),
                            Text('年龄: ${pet.age}岁'),
                          ],
                        ),
                      ),
                    ),
                  );
                },
              ),
      ),
    );
  }
}

3. 实现其他跳转页面（示例） #

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('其他页面')),
      body: const Center(child: Text('这是跳转后的页面')),
    );
  }
}

4. 实现宠物详情页 #

class PetDetailPage extends StatelessWidget {
  final Pet pet;

  const PetDetailPage({super.key, required this.pet});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text(pet.nickname)),
      body: Padding(
        padding: const EdgeInsets.all(25.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Text(
              '宠物详情',
              style: const TextStyle(fontSize: 22, fontWeight: FontWeight.bold),
            ),
            const SizedBox(height: 20),
            Text('昵称: ${pet.nickname}'),
            const SizedBox(height: 10),
            Text('性别: ${pet.gender}'),
            const SizedBox(height: 10),
            Text('年龄: ${pet.age}岁'),
          ],
        ),
      ),
    );
  }
}

关键实现说明 #

• 页面跳转：通过Navigator.push配合MaterialPageRoute实现页面跳转，确保在有BuildContext的环境下调用（比如按钮的onPressed回调中）。
• 宠物卡片管理：用List<Pet>维护宠物数据，通过setState更新列表触发UI重绘。
• 添加宠物：使用AlertDialog收集用户输入，验证后添加到列表中。
• 卡片点击跳转：用InkWell包裹Card，点击时携带宠物数据跳转到详情页。

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