Flutter（三）：Image

1 普通用法

import 'package:flutter/material.dart';

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

// 自定义组件
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    // MaterialApp 作为顶层组件
    return MaterialApp(
      // Scaffold 定义导航头部和页面主要内容
      home: Scaffold(
        appBar: AppBar(
          title: Text('flutter 标题'),
        ),
        body: HomePage(),
      ),
      theme: ThemeData(
        primarySwatch: Colors.green,
      ),
    );
  }
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Container(
        height: 300.0,
        width: 300.0,
        // color: Colors.grey, // 不能和 decoration color 同时存在，会报错
        decoration: BoxDecoration(
          color: Colors.red,
        ),
        child: Image.network(
          // "http://pic.baike.soso.com/p/20130828/20130828161137-1346445960.jpg",
          "https://www.itying.com/images/202004/thumb_img/1067_thumb_G_1587531602352.jpg",
          alignment: Alignment.center,

          // color: Colors.blue, // 一般不用，切图就应该切好了
          // colorBlendMode: BlendMode.lighten,

          fit: BoxFit.cover,

          // repeat: ImageRepeat.repeatX,
        ));
  }
}

2 实现圆形和圆角图片

• 通过 decoration，利用 BoxDecoration 属性的 borderRadius 和 image

import 'package:flutter/material.dart';

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

// 自定义组件
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    // MaterialApp 作为顶层组件
    return MaterialApp(
      // Scaffold 定义导航头部和页面主要内容
      home: Scaffold(
        appBar: AppBar(
          title: Text('flutter 标题'),
        ),
        body: HomePage(),
      ),
      theme: ThemeData(
        primarySwatch: Colors.green,
      ),
    );
  }
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Container(
      height: 300.0,
      width: 300.0,
      // color: Colors.grey, // 不能和 decoration color 同时存在，会报错
      decoration: BoxDecoration(
          color: Colors.red,
          borderRadius: BorderRadius.circular(150),
          image: DecorationImage(
            // "http://pic.baike.soso.com/p/20130828/20130828161137-1346445960.jpg",
            image: NetworkImage(
              "https://www.itying.com/images/202004/thumb_img/1067_thumb_G_1587531602352.jpg",
            ),
            fit: BoxFit.cover,
          )),
    );
  }
}

效果

• 通过 ClipOval 类

import 'package:flutter/material.dart';

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

// 自定义组件
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    // MaterialApp 作为顶层组件
    return MaterialApp(
      // Scaffold 定义导航头部和页面主要内容
      home: Scaffold(
        appBar: AppBar(
          title: Text('flutter 标题'),
        ),
        body: HomePage(),
      ),
      theme: ThemeData(
        primarySwatch: Colors.green,
      ),
    );
  }
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Container(
      child: ClipOval(
        child: Image.network(
          "https://www.itying.com/images/202004/thumb_img/1067_thumb_G_1587531602352.jpg",
          width: 100,
          height: 100,
          fit: BoxFit.cover,
        ),
      ),
    );
  }
}

3 引入本地图片

然后，打开 pubspec.yaml 声明一下添加的图片文件，注意要配置对

最后，在代码中就可以用了

import 'package:flutter/material.dart';

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

// 自定义组件
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    // MaterialApp 作为顶层组件
    return MaterialApp(
      // Scaffold 定义导航头部和页面主要内容
      home: Scaffold(
        appBar: AppBar(
          title: Text('flutter 标题'),
        ),
        body: HomePage(),
      ),
      theme: ThemeData(
        primarySwatch: Colors.green,
      ),
    );
  }
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Container(
      child: ClipOval(
        child: Image.asset(
          "images/a.jpeg",
          width: 100,
          height: 100,
          fit: BoxFit.cover,
        ),
      ),
    );
  }
}