Flutter加载图片

最新推荐文章于 2024-09-23 14:30:59 发布

举儿

最新推荐文章于 2024-09-23 14:30:59 发布

阅读量947

点赞数

分类专栏： Flutter 文章标签： flutter image

本文链接：https://blog.csdn.net/juer2017/article/details/129819208

版权

Flutter 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

本文展示了在Flutter中如何加载网络图片并实现不同效果，如圆形图片展示，使用ClipOval和BoxDecoration的BorderRadius。此外，还涵盖了加载本地图片的步骤，包括在pubspec.yaml中配置资产路径，以及使用SingleChildScrollView进行滚动布局。

摘要由CSDN通过智能技术生成

加载网络图片

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

  @override
  Widget build(BuildContext context) {
    return Center(
        child: Container(
      margin: const EdgeInsets.fromLTRB(0, 20, 0, 0),
      //右对齐
      // alignment: Alignment.centerRight,
      width: 150,
      height: 150,
      decoration: const BoxDecoration(color: Colors.yellow),
      child: Image.network(
        "https://www.itying.com/themes/itying/images/ionic4.png",
        // repeat: ImageRepeat.repeat, //横向纵向复制填充
        // repeat: ImageRepeat.repeatY,//纵向复制填充
        // repeat: ImageRepeat.repeatX,//横向复制填充
        // fit: BoxFit.fitHeight, //高度撑满
        // fit: BoxFit.fitWidth, //宽度撑满
        // fit: BoxFit.cover, //裁剪中心撑满控件
        // fit: BoxFit.fill, //拉伸压缩撑满控件
        // alignment: Alignment.centerLeft, //左对齐
        // scale: 2 //按比例缩小
      ),
    ));
  }
}

实现一个圆形图片

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

  @override
  Widget build(BuildContext context) {
    return Container(
      width: 150,
      height: 150,
      decoration: BoxDecoration(
        color: Colors.yellow,
        borderRadius: BorderRadius.circular(75), //圆角设置
        image: const DecorationImage(
          image: NetworkImage(
              "https://www.itying.com/themes/itying/images/ionic4.png"),
          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.itying.com/themes/itying/images/ionic4.png",
        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(
      width: 150,
      height: 150,
      decoration: const BoxDecoration(color: Colors.yellow),
      child: Image.asset("images/2.0x/pic1.png"),
    );
  }
}

图片存放新建文件夹images/2.0x/下

配置pubspec.yaml

flutter:
  uses-material-design: true
  assets:
    - images/2.0x/pic1.png

SingleChildScrollView布局

void main() {
  runApp(MaterialApp(
    home: Scaffold(
      appBar: AppBar(title: const Text("你好Flutter")),
      body: SingleChildScrollView(
        physics: const BouncingScrollPhysics(), //下拉回弹效果（替换默认下拉/上拉阴影）
        child: Column(
          children: const [
            MyApp(),
            SizedBox(height: 20),
            Circular(),
            SizedBox(height: 20),
            ClipImage(),
            SizedBox(height: 20),
            LoaclImage()
          ],
        ),
      ),
    ),
  ));
}