Flutter技术问询：SvgPicture的类型及CustomProfile组件调用方法

1. Flutter中SvgPicture的类型是什么？ #

SvgPicture是Flutter的Widget子类，它本身的类型就是SvgPicture，专门用于在Flutter应用中渲染SVG格式的图像。

2. CustomProfile组件的svgPic参数应定义为何种类型？ #

根据实际使用场景，有两种常见定义方式：

• 场景1：直接传入已创建好的SvgPicture实例
  此时参数类型定义为SvgPicture，代码示例：

  class CustomProfile extends StatelessWidget {
    final String title;
    final SvgPicture svgPic;
  
    const CustomProfile({
      required this.title,
      required this.svgPic,
      super.key,
    });
  
    @override
    Widget build(BuildContext context) {
      return Column(
        children: [
          svgPic,
          Text(title),
        ],
      );
    }
  }
  

• 场景2：传入SVG资源路径（更灵活）
  此时参数类型定义为String，在组件内部创建SvgPicture实例，代码示例：

  import 'package:flutter_svg/flutter_svg.dart';
  
  class CustomProfile extends StatelessWidget {
    final String title;
    final String svgPicPath;
  
    const CustomProfile({
      required this.title,
      required this.svgPicPath,
      super.key,
    });
  
    @override
    Widget build(BuildContext context) {
      return Column(
        children: [
          SvgPicture.asset(svgPicPath), // 本地asset加载
          // 网络SVG用SvgPicture.network(svgPicPath)
          Text(title),
        ],
      );
    }
  }
  

3. 在Column组件中调用CustomProfile组件并使用svgPic参数 #

对应上面两种场景，示例代码如下：

场景1（传入SvgPicture实例） #

Column(
  children: [
    CustomProfile(
      title: "我的资料",
      svgPic: SvgPicture.asset("assets/icons/profile.svg"),
    ),
    // 其他子组件
  ],
)

场景2（传入SVG资源路径） #

Column(
  children: [
    CustomProfile(
      title: "我的资料",
      svgPicPath: "assets/icons/profile.svg",
    ),
    // 其他子组件
  ],
)

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