4、图片组件详解

Image组件的常用属性:

 

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    home: Scaffold(
        appBar: AppBar(title: const Text("这是导航栏")),
        body:  const Column(children: [
           MyImage(),
           SizedBox(height: 30,),
           Circular(),
          SizedBox(height: 30,),
           ClipOvalS(),
             SizedBox(height: 30,),
           localImage()
        ],) 
        )
  ));
}

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

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        width: 150,
        height: 150,
        
        decoration:  const BoxDecoration(
          color: Color.fromARGB(255, 105, 204, 147),
        ),
        child: 
        Image.network("https://dashanbook.oss-cn-shenzhen.aliyuncs.com/46aa6e030985487894f34196c4df3ee4.jpg",
        fit:BoxFit.fill),
        
       ),
    );
  }
}
//实现一个圆形的图片
class Circular extends StatelessWidget {
  const Circular({super.key});
  @override
  Widget build(BuildContext context) {
    return Container(
        width: 100,
        height: 100,
        decoration:  BoxDecoration(
          color: const Color.fromARGB(255, 172, 228, 68),
          borderRadius: BorderRadius.circular(100),
          image: const DecorationImage(
          image: NetworkImage("https://dashanbook.oss-cn-shenzhen.aliyuncs.com/46aa6e030985487894f34196c4df3ee4.jpg",
          ),fit: BoxFit.cover),
        ),
    );
  }
}

//实现一个圆形的图片  使用ClipOval
class ClipOvalS extends StatelessWidget {
  const ClipOvalS({super.key});
  @override
  Widget build(BuildContext context) {
    return ClipOval(
      child: Image.network("https://dashanbook.oss-cn-shenzhen.aliyuncs.com/46aa6e030985487894f34196c4df3ee4.jpg",
    width: 100,height: 100, fit: BoxFit.cover,   ),
    );
  }
}
//加载本地的图片
class localImage extends StatelessWidget {
  const localImage({super.key});

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

Image.network 远程图片

Image.asset， 本地图片

 

CircleAvatar实现一个圆形图片

radius 元的半径

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

  @override
  Widget build(BuildContext context) {
    return const CircleAvatar(
      radius: 200,
      backgroundImage: NetworkImage("https://www.itying.com/images/flutter/3.png"),
    );
  }
}

基本上，CircleAvatar 不提供设置边框的属性。但是，可以将其包裹在具有更大半径和不同背景颜色的

不同 CircleAvatar 中，以创建类似于边框的内容。

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

  @override
  Widget build(BuildContext context) {
    return const CircleAvatar(
      radius: 200,
      backgroundColor: Color(0xffFDCF09),
      child: CircleAvatar(
        radius: 100,
        backgroundImage:
        NetworkImage("https://www.itying.com/images/flutter/3.png"),
      )
    );
  }
}

 透明图片

                    Opacity(
                      opacity:0.5,
                      child:
                    Image.asset(
                      'images/home/students.png',
                      width: height / 10,
                      height: height / 10,
                    ))