Flutter新手求助：如何在Card中插入图片并保留页面跳转功能？

在Flutter的Card组件中插入图片无需特定函数，直接使用Image组件（本地图用Image.asset，网络图用Image.network）嵌入Card的子组件树即可。以下是修正后的完整代码，既实现了类似示例图的带图卡片样式，又保留了点击跳转页面的功能：

// @dart=2.17
import 'dart:io';

import 'package:farma/ansioliticos.dart';
import 'package:farma/antiistaminicos.dart';
import 'package:farma/antivirais.dart';
import 'package:farma/analgesicos.dart';
import 'package:farma/antibiotico.dart';
import 'package:farma/antifungicos.dart';
import 'package:farma/antiinflamatorio.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Farmacologia Odontológica',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: const Splash(),
    );
  }
}

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

  @override
  State<Splash> createState() => _SplashState();
}

class _SplashState extends State<Splash> {
  @override
  void initState() {
    super.initState();
    Future.delayed(const Duration(seconds: 2), () {
      Navigator.pushReplacement(
          context, MaterialPageRoute(builder: (context) => const HomePage()));
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.teal,
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Image.asset('icons/Icone inicial.png', height: 230, width: 230),
            const SizedBox(height: 30),
            if (Platform.isIOS)
              const CupertinoActivityIndicator(
                radius: 15,
              )
            else
              const CircularProgressIndicator(
                color: Colors.white,
              )
          ],
        ),
      ),
    );
  }
}

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

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  // 定义统一的卡片标题样式
  final TextStyle productTitleStyle = const TextStyle(
    fontFamily: 'Quicksand-Medium',
    fontSize: 16,
    fontWeight: FontWeight.w500,
  );

  // 复用带图卡片组件
  Widget buildMedCard({
    required String imagePath,
    required String title,
    required VoidCallback onTap,
  }) {
    return GestureDetector(
      onTap: onTap,
      child: Card(
        elevation: 12,
        margin: const EdgeInsets.symmetric(horizontal: 12, vertical: 8),
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(20),
        ),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: [
            // 卡片顶部图片
            ClipRRect(
              borderRadius: const BorderRadius.only(
                topLeft: Radius.circular(20),
                topRight: Radius.circular(20),
              ),
              child: Image.asset(
                imagePath,
                height: 120,
                fit: BoxFit.cover,
              ),
            ),
            // 卡片标题
            Padding(
              padding: const EdgeInsets.symmetric(vertical: 12, horizontal: 16),
              child: Text(
                title,
                style: productTitleStyle,
                textAlign: TextAlign.center,
              ),
            ),
          ],
        ),
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.teal,
        centerTitle: true,
        title: const Text(
          'Farmacologia Odontológica',
          style: TextStyle(
            fontFamily: 'Quicksand-Light',
            fontSize: 22,
          ),
        ),
      ),
      body: ListView(
        children: [
          const SizedBox(height: 10),
          const Text(
            'Classes de Medicamentos',
            textAlign: TextAlign.center,
            style: TextStyle(
              fontFamily: 'Quicksand-Medium',
              fontSize: 18,
            ),
          ),
          const SizedBox(height: 10),
          // 各类药物卡片
          buildMedCard(
            imagePath: 'icons/Icone inicial.png',
            title: 'Analgésicos',
            onTap: () => Navigator.push(
              context,
              MaterialPageRoute(builder: (context) => const analgesicos()),
            ),
          ),
          buildMedCard(
            imagePath: 'icons/Icone inicial.png', // 替换为对应图片路径
            title: 'Anti-inflamatórios',
            onTap: () => Navigator.push(
              context,
              MaterialPageRoute(builder: (context) => const Antiinflamatorio()),
            ),
          ),
          buildMedCard(
            imagePath: 'icons/Icone inicial.png',
            title: 'Antibióticos',
            onTap: () => Navigator.push(
              context,
              MaterialPageRoute(builder: (context) => const Antibioticos()),
            ),
          ),
          buildMedCard(
            imagePath: 'icons/Icone inicial.png',
            title: 'Antifúngicos',
            onTap: () => Navigator.push(
              context,
              MaterialPageRoute(builder: (context) => const Antifungicos()),
            ),
          ),
          buildMedCard(
            imagePath: 'icons/Icone inicial.png',
            title: 'Antivirais',
            onTap: () => Navigator.push(
              context,
              MaterialPageRoute(builder: (context) => const Antivirais()),
            ),
          ),
          buildMedCard(
            imagePath: 'icons/Icone inicial.png',
            title: 'Anti-histamínicos',
            onTap: () => Navigator.push(
              context,
              MaterialPageRoute(builder: (context) => const Antihistaminicos()),
            ),
          ),
          buildMedCard(
            imagePath: 'icons/Icone inicial.png',
            title: 'Ansiolíticos',
            onTap: () => Navigator.push(
              context,
              MaterialPageRoute(builder: (context) => const Ansioliticos()),
            ),
          ),
        ],
      ),
    );
  }
}

关键修改说明 #

• 用ListView替代原Column，解决页面内容过多时的滚动问题
• 封装了buildMedCard复用组件，避免重复代码，便于统一修改样式
• 为Card设置了圆角、阴影和边距，匹配示例图的视觉效果
• 给图片固定高度并设置BoxFit.cover，保证图片显示正常
• 修复了原代码中未定义的productTitleStyle，统一了文本样式
• 保持了原有的页面跳转逻辑，确保点击卡片能正常跳转到对应页面

内容的提问来源于stack exchange，提问作者Pedro Henrique Cesar