flutter 远程图片 本地图片

99 阅读1分钟
/// 远程图片Image.network
/// 本地图片Image.asset
/// images文件夹中放入图片a.jpg
/// 根目录文件pubspec.yaml修改assets
assets:
    - images/

运用

import 'package:flutter/material.dart';

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(title: const Text("你好Flutter")),
        body: const Column(
          children: [
            MyApp(),
            SizedBox(
              height: 10,
            ),
            Circular(),
            SizedBox(height: 10),
            ClipImage(),
            SizedBox(height: 10),
            LoaclImage()
          ],
        ));
  }
}

/// 远程图片
/// https://www.jeyarlin.club/images/q1.jpg
/// https://www.jeyarlin.club/images/q2.jpg
/// https://www.jeyarlin.club/images/q3.jpg

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return Center(
        child: Container(
      // alignment: Alignment.centerRight,
      margin: const EdgeInsets.fromLTRB(0, 20, 0, 0),
      height: 150,
      width: 150,
      decoration: const BoxDecoration(color: Colors.yellow),
      child: Image.network(
        "https://www.jeyarlin.club/images/q2.jpg",
        // alignment:Alignment.centerLeft
        // scale:2
        // fit: BoxFit.cover,
        // repeat:ImageRepeat.repeatY
      ),
    ));
  }
}

//实现一个圆形图片
class Circular extends StatelessWidget {
  const Circular({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return Container(
      height: 150,
      width: 150,
      decoration: BoxDecoration(
          color: Colors.yellow,
          borderRadius: BorderRadius.circular(75),
          image: const DecorationImage(
              image: NetworkImage("https://www.jeyarlin.club/images/q1.jpg"),
              fit: BoxFit.cover)),
    );
  }
}

//实现一个圆形图片 使用 ClipOval
class ClipImage extends StatelessWidget {
  const ClipImage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return ClipOval(
      child: Image.network(
        "https://www.jeyarlin.club/images/q3.jpg",
        width: 150,
        height: 150,
        fit: BoxFit.cover,
      ),
    );
  }
}

//加载本地图片

class LoaclImage extends StatelessWidget {
  const LoaclImage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      height: 150,
      width: 150,
      decoration: const BoxDecoration(
        color: Colors.yellow,
      ),
      child: Image.asset(
        "images/a.jpg",
        fit: BoxFit.cover,
      ),
    );
  }
}