flutter 加载图片和文件

加载图片的两个widget：Image.network() ,Image.asset()

Image.network() 用于加载网络图片，

Image.network()的使用

Image.network(
    String src,  // 图片地址
  {
    super.key,
    double scale = 1.0, // 缩放
    this.frameBuilder, 
    this.loadingBuilder,
    this.errorBuilder,
    this.semanticLabel,
    this.excludeFromSemantics = false,
    this.width, // 宽度
    this.height, // 高度
    this.color, // 背景色
    this.opacity, // 透明度
    this.colorBlendMode, // 颜色混合
    this.fit, // 图片适应
    this.alignment = Alignment.center, //对齐方式
    this.repeat = ImageRepeat.noRepeat, // 图片重复展示
    this.centerSlice,
    this.matchTextDirection = false,
    this.gaplessPlayback = false,
    this.filterQuality = FilterQuality.low,
    this.isAntiAlias = false,
    Map<String, String>? headers,
    int? cacheWidth,
    int? cacheHeight,
  }) 

实例

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

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        width: 200,
        height: 200,
        margin: EdgeInsets.fromLTRB(0, 40, 0, 40),
        decoration:  BoxDecoration(
          color: Colors.orange,
        ),
        // 添加一个网络图片Widget，图片fit为cover，宽度200，高度200
        child: Image.network("https://img0.baidu.com/it/u=823872589,3855820635&fm=253",
          fit: BoxFit.cover,
          width: 200,
          height: 200,),
      )
    );
  }
}

Image.asset()用于加载本地图片

加载本地图片需要三步

1. 添加一个文件夹images 到根目录，然后在images文件下添加2.0x文件和3.0文件，

2. 需要到pubspec.yaml文件下，添加图片路径

3. 使用Image.asset(),这里需要注意添加完图片后，需要进行重启项目才能找到图片。

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

  @override
  Widget build(BuildContext context) {
    return ClipOval(
      // backgroundImage: Image.asset(""),
      child: Image.asset('images/a.jpeg',fit: BoxFit.cover,width: 200,height: 200,),
    );
  }
}

加载文件

以加载本地的json文件为例，加载本地的json文件和加载本地的图片差不多。

1. 添加一个文件夹assets 到根目录，然后在assets文件下添加json文件夹，文件夹下有title_list.json文件。

json文件中的内容。

{
  "artical": [
    {
      "title":"都2023年了，你还不懂这是啥",
      "auto":"哇蓝蓝",
      "time":"1天前",
      "desc":"在前端大环境如此不好的情况下，你有什么打算考虑一下。",
      "type":"前端"
    },
    {
      "title":"php如何快速搭建一个博客，这么做节省一年的时间，快来试试吧",
      "auto":"天其不错哦",
      "time":"1月前",
      "desc":"作为一个php的小码农，你不想拥有一个简单的博客系统吗？进可攻，退可守",
      "type":"后端"
    },
    {
      "title":"flutter新的适配移动端的方案，跨平台的解决方案，最优还是一般，看看大佬的看法吧",
      "auto":"有些人",
      "time":"3天前",
      "desc":"flutter新的适配移动端的方案，跨平台的解决方案，最优还是一般，看看大佬的看法吧",
      "type":"移动端"
    }
  ]
}

2. 需要根据json文件的内容来创建对应的class。

可以自己手写，当然也可以第三方生成。这里我使用app.quicktype.io/ 这个网站来生成类。切记生成的类需要检查一下，有时会有错误出现的。

这里简单看一下生成的代码，看下面两行的代码。

// 这个函数，传入一个json字符串生成对应的类出来，json.decode(str)，将json字符串转为map对象
ArticalData articalDataFromJson(String str) => ArticalData.fromJson(json.decode(str));

// 传入类，生成对应的json
String articalDataToJson(ArticalData data) => json.encode(data.toJson());

3. 加载json文件

需要想加载本地图片一下，先在pubspec.yaml文件下，添加文件路径，这里我们只写到了json/ 的路径，这里会找到对应文件夹下的所有文件。

使用异步加载函数rootBundle.loadString(String key, {bool cache = true})，来加载json文件，加载完成会返回一个字符串出来。

Future getlist() async {
    // 异步加载json文件 
    String jsonstings = await rootBundle.loadString("assets/json/title_list.json");
    
    // 调用上面生成的方法，传入回去到的字符串
    ArticalData articaldata = articalDataFromJson(jsonstings);
    
    // 返回生成的类 
    return articaldata.artical;
  } 

至此加载本地的json文件就完成了。