Wigets学习之图片

在Flutter中图片分为：本地图片和网络图片

Image

用于显示图片

• image：图片Widget，本地图片可以使用AssetImage，网络图片可以使用NetworkImage
• frameBuilder：图片帧构造器，可用于设置图片样式，BuildContext context是构建上下文，Widget child为当前图片，int? frame为渲染Image帧数的下标(默认首帧)
• loadingBuilder：图片加载构造器，用于设置加载样式
• errorBuilder：图片加载失败构造器，用于设置加载失败样式
• semanticLabel：语义化描述
• excludeFromSemantics：是否从语义化中排除
• width：宽度
• height：高度
• color：颜色
• colorBlendMode：颜色混合模式，默认为BlendMode.srcIn
• fit：图片裁剪，默认为BoxFit.contain
  • BoxFit.contain：等比例显示，确保长边完全显示
  • BoxFit.cover：等比例显示，确保短边完全显示
  • BoxFit.fill：拉伸显示确保完全显示
  • BoxFit.fitHeight：等比显示，以高度为准显示
  • BoxFit.fitWidth：等比显示，以宽度度为准显示
• repeat：重复方式

import 'package:flutter/material.dart';

void main() {
  runApp(App());
}

class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        Image(
          image: AssetImage('assets/images/logo.png'),
          width: 200,
          frameBuilder: (
            BuildContext context,
            Widget child,
            int? frame,
            bool wasSynchronouslyLoaded,
          ) {
            return Container(
                padding: EdgeInsets.all(9),
                color: Colors.red.shade100,
                child: child);
          },
        ),
        SizedBox(
          height: 10,
        ),
        Image(
            image: NetworkImage(
                'https://img0.baidu.com/it/u=2592042537,1864064944&fm=26&fmt=auto&gp=0.jpg'),
            width: 200,
            height: 300,
            repeat: ImageRepeat.repeat),
      ],
    );
  }
}

Image.asset

显示一个本地图片

• name：图片路径(必填)

其他属性和Image一致

import 'package:flutter/material.dart';

void main() {
  runApp(App());
}

class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Image.asset(
        'assets/images/logo.png',
        width: 200,
      ),
    );
  }
}

Image.network

显示一个网络图片

• src：图片地址(必填)

其他属性和Image一致

import 'package:flutter/material.dart';

void main() {
  runApp(App());
}

class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Image.network(
        'https://img0.baidu.com/it/u=2592042537,1864064944&fm=26&fmt=auto&gp=0.jpg',
        width: 200,
      ),
    );
  }
}

圆角图片

实现圆角图片可以配合ClipRRect部件

ClipRRect

使用圆角裁剪子部件

• child：子部件
• borderRadius：圆角弧度

import 'package:flutter/material.dart';

void main() {
  runApp(App());
}

class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: ClipRRect(
        child: Image.network(
          'https://img0.baidu.com/it/u=2592042537,1864064944&fm=26&fmt=auto&gp=0.jpg',
          width: 200,
        ),
        borderRadius: BorderRadius.circular(16),
      ),
    );
  }
}

圆形图片

实现圆形图片可以配合ClipOval部件

ClipOval

创建一个圆形裁剪

• child：裁剪的部件

import 'package:flutter/material.dart';

void main() {
  runApp(App());
}

class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: ClipOval(
        child: Image.network(
          'https://img0.baidu.com/it/u=2592042537,1864064944&fm=26&fmt=auto&gp=0.jpg',
          width: 200,
        ),
      ),
    );
  }
}

圆形头像

用于展示圆形头像

• child：头像内容，可以指定文字，如果指定为图片则需要手动设置图片圆角
• backgroundColor：背景色
• backgroundImage：背景图
• radius：大小
• minRadius：最小
• maxRadius：最大

import 'package:flutter/material.dart';

void main() {
  runApp(App());
}

class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: CircleAvatar(
            child: Text('Code'),
          ),
        ),
      ),
    );
  }
}