Image 组件详解 Icon 组件详解 ListView 组件详解

最新推荐文章于 2025-08-20 18:34:09 发布
最新推荐文章于 2025-08-20 18:34:09 发布
阅读量205 收藏
点赞数 1
CC 4.0 BY-SA版权
分类专栏： flutter 文章标签： flutter android ios
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/mylgcs/article/details/130438026
本文深入解析Flutter中的Image组件，包括加载远程和本地图片，以及实现圆形图片的方法。接着介绍Icon组件的使用，特别是如何添加自定义图标。最后详细探讨ListView组件，涵盖垂直列表、水平列表及动态列表的实现。Flutter以其高性能、美观的UI和丰富的组件库，助力开发者快速构建应用。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

Flutter文章目录

提示：如有雷同，请联系作者删除

文章目录

前言

Flutter 是一款开源的跨平台移动应用开发框架，它可以让开发者在单个代码库中构建高性能、美观的 iOS 和 Android 应用。Flutter 采用了现代化的编程语言 Dart，并自带丰富的 UI 组件和工具库。通过 Flutter，开发者可以快速地创建出具有高质量的视觉效果、流畅的用户体验、和响应式的布局的应用，同时避免了传统跨平台框架的繁琐和不稳定。

提示：以下是本篇文章正文内容，下面案例可供参考

一、Image 组件详解

1. 加载远程图片

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

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        margin: const EdgeInsets.all(10.0),
        width: 100,
        height: 100,
        color: Colors.red,
        child: Image.network(
          'https://flutter.github.io/assets-for-api-docs/assets/widgets/owl-2.jpg',
          fit: BoxFit.cover,
        ),
      ),
    );
  }
}

2. Container实现圆形图片

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

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        margin: const EdgeInsets.all(10.0),
        width: 100,
        height: 100,
        decoration: const BoxDecoration(
          shape: BoxShape.circle, // 圆形装饰线
          image: DecorationImage(
            image: NetworkImage(
              'https://flutter.github.io/assets-for-api-docs/assets/widgets/owl-2.jpg',
            ),
            fit: BoxFit.cover, // 图片填充方式
          ),
        ),
      ),
    );
  }
}

3. clipOval 实现圆形图片

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

  @override
  Widget build(BuildContext context) {
    return Center(
      child: ClipOval(
        child: Image.network(
          'https://flutter.github.io/assets-for-api-docs/assets/widgets/owl-2.jpg',
          width: 100,
          height: 100,
          fit: BoxFit.cover,
        ),
      ),
    );
  }
}

4. circleAvatar 实现圆形图片

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

  @override
  Widget build(BuildContext context) {
    return const Center(
      child: CircleAvatar(
        backgroundImage: NetworkImage(
          'https://flutter.github.io/assets-for-api-docs/assets/widgets/owl-2.jpg',
        ),
        radius: 50, // 圆形半径
      ),
    );
  }
}

5. 加载本地图片

加载本地图片需要主意细节

  1. 需要找到pubspec.yaml
  2. 找到assets把你存在本地的图片放上去在这里插入图片描述
    主意格式 格式不对会加载不出来
class MyImage4 extends StatelessWidget{
  const MyImage4({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return const Center(
      child: CircleAvatar(
        backgroundImage: AssetImage(
          'images/04.png',
        ),
        radius: 50,
      ),
    );
  }
}

二、Icon 组件详解

1. Flutter 使用框架自带的Icon是非常简单啊

代码如下（示例）：

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

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Column(
        children:const [
          Icon(
            Icons.favorite,
            color: Colors.pink,
            size: 24.0,
            semanticLabel: 'Text to announce in accessibility modes', // 无障碍访问
          ),
          SizedBox(height: 20),
          Icon(
            Icons.audiotrack,
            color: Colors.green, // 图标颜色
            size: 30.0, // 图标大小
          ),
          SizedBox(height: 20),
          Icon(
            Icons.beach_access,
            color: Colors.blue,
            size: 36.0,
          ),
          SizedBox(height: 20),
          Icon(
            Icons.access_alarm,
            color: Colors.orange,
            size: 48.0,
          ),
          SizedBox(height: 20),
          Icon(
            Icons.access_time,
            color: Colors.red,
            size: 60.0,
          ),
        ]
      )
    );
  }
}

2. 这里主要是介绍自定义图片使用方法

  1. 去阿里巴巴矢量图标库找到自己想要的图标添加到购物车
  2. 点击购物车图标弹出右边侧栏点击下载代码
  3. 在我们项目中新建fonts文件把下载文件里面的iconfont.ttf和iconfont.json放到我们项目的fonts中
  4. 找打pubspec.yaml文件在文件中找到fonts，中定义自定义图标
  5. 在lib里面新建utils文件夹在文件夹中新建自己自定义图片的规则

代码如下（示例）：

提示：主意Unicode编码就是json里面的Unicode，前面0x是规范

// 比如我在utils里面新建的文件叫my_icon.dart

// 导入图标库
import 'package:flutter/material.dart';

// 自定义图标
class MyIcons {
  static const IconData zhifubao = IconData(
    0xe654, // 图标的Unicode编码
    fontFamily: 'myIcon', // 图标的字体
    matchTextDirection: true // 文字方向和图标方向一致
  );
  static const IconData weixin = IconData(
    0xe7ba,
    fontFamily: 'myIcon',
    matchTextDirection: true
  );
  static const IconData xiaomi = IconData(
    0xe781,
    fontFamily: 'myIcon',
    matchTextDirection: true
  );
}

使用自定义图标

import 'package:flutter/material.dart';
import 'utils/my_icon.dart'; // 导入图标库
void main() {
  runApp(MaterialApp(
      title: 'Flutter Tutorial',
      home: Scaffold(
          appBar: AppBar(
            title: const Text('Flutter Tutorial'),
          ),
          body: Column(
            children: const [
              MyApp(),
            ],
          )
      )
  ));
}


// container 组件详解
class MyApp extends StatelessWidget{
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Column(
        children:const [
          // 实现自定义图标
          Icon(
            MyIcons.zhifubao,
            color: Colors.blue,
            size: 60.0,
          ),
          SizedBox(height: 20),
          Icon(
            MyIcons.weixin,
            color: Colors.green,
            size: 60.0,
          ),
          SizedBox(height: 20),
          Icon(
            MyIcons.xiaomi,
            color: Colors.orange,
            size: 60.0,
          ),
        ]
      )
    );
  }
}

2.ListView 组件详解

1.垂直列表

代码如下（示例）：

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

  @override
  Widget build(BuildContext context) {
    return ListView(
      children: const <Widget>[
        ListTile(
          leading: Icon( // 左侧图标 主意leading和trailing的他们单单可以放图标 也可以放其他的组件
            Icons.favorite,
            color: Colors.pink,
            size: 24.0,
            semanticLabel: 'Text to announce in accessibility modes',
          ),
          title: Text('One-line with leading widget'),
          trailing: Icon( // 右侧图标
            Icons.arrow_forward_ios_outlined,
            color: Colors.grey,
            size: 20.0,
          ),
        ),
        // 线条 用于分割
        Divider(),
        ListTile(
          leading: Icon(
            Icons.audiotrack,
            color: Colors.green,
            size: 30.0,
          ),
          title: Text('One-line with leading widget'),
          trailing: Icon(
            Icons.arrow_forward_ios_outlined,
            color: Colors.grey,
            size: 20.0,
          ),
        ),
        Divider(),
        ListTile(
          leading: Icon(
            Icons.beach_access,
            color: Colors.blue,
            size: 36.0,
          ),
          title: Text('One-line with leading widget'),
          // 右侧图标
          trailing: Icon(
            Icons.arrow_forward_ios_outlined,
            color: Colors.grey,
            size: 20.0,
          ),
        ),
        Divider(),
      ],
    );
  }
}

2. 水平列表

class MyApp extends StatelessWidget{

  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return ListView(
      scrollDirection: Axis.horizontal, // 水平列表
      children: <Widget>[
        Container(
          width: 160.0,
          color: Colors.red,
        ),
        Container(
          width: 160.0,
          color: Colors.blue,
        ),
        Container(
          width: 160.0,
          color: Colors.green,
        ),
        Container(
          width: 160.0,
          color: Colors.yellow,
        ),
        Container(
          width: 160.0,
          color: Colors.orange,
        ),

      ],
    );
  }
}

3. 动态列表的几种写法

提示：个人比较倾向于第一种写法

class MyApp extends StatelessWidget{

    const MyApp({Key? key}) : super(key: key);

    @override
    Widget build(BuildContext context) {
      return ListView.builder(
          itemCount: 20,
          itemExtent: 50.0, // 强制高度为50.0
          itemBuilder: (BuildContext context, int index) {
            return ListTile(title: Text("$index"));
          }
      );
    }
}


class MyApp extends StatelessWidget{

  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return ListView.separated(
        itemCount: 20,
        itemBuilder: (BuildContext context, int index) {
          return ListTile(title: Text("$index"));
        },
        separatorBuilder: (BuildContext context, int index) {
          return index % 2 == 0 ? Divider(color: Colors.blue) : Divider(color: Colors.red);
        }
    );
  }
}

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

  // ignore: non_constant_identifier_names
  List<Widget> _ListData() {
    List<Widget> list = [];
    for (var i = 0; i < 20; i++) {
      list.add(ListTile(title: Text("我是列表$i")));
      // 添加分割线 奇数蓝色 偶数红色
      if (i % 2 == 0) {
        list.add(const Divider(color: Colors.blue));
      } else {
        list.add(const Divider(color: Colors.red));
      }
      // 最后一个不添加分割线
      if (i == 19) {
        list.removeLast();
      }
    }
    return list;
  }

  @override
  Widget build(BuildContext context) {
    return ListView(
      children: [
        Column(
          children: _ListData(),
        )
      ],
    );
  }
}

总结

提示：这里对文章进行总结：

在 Flutter 中，Image 组件用于展示图片，Icon 组件用于展示图标，ListView 组件用于展示列表。Image 组件通过 image 、 width 、 height 、 fit 和 alignment 等属性来展示图片；Icon 组件通过 icon 、 color 和 size 等属性来展示图标；ListView 组件通过 children 、 scrollDirection 、 reverse 、 controller 、 itemExtent 、 padding 、 shrinkWrap 和 physics 等属性来展示列表。使用这些组件，开发者可以快速地构建出具有高质量的视觉效果、流畅的用户体验和响应式的布局的应用。同时，Flutter 采用了现代化的编程语言 Dart，并自带丰富的 UI 组件和工具库，为开发者提供了更加高效和有力的工具和支持。 有些功能还需要大家慢慢去发掘这里就不一一为大家介绍了.

Android UI 组件系列（八）：ListView 基础用法与适配器详解
weixin_39339407的博客
07-25 753
本文介绍了Android中ListView组件的基础使用方式。主要内容包括：ListView的UI结构和渲染机制；通过ArrayAdapter快速展示简单文本列表；使用SimpleAdapter实现图文混排效果；设置点击事件和选中状态的两种方法；以及一个完整的图文混排列表实现示例。虽然RecyclerView已成为更现代的替代方案，但ListView仍是理解Android适配器机制和列表组件的重要入门途径，在快速原型开发中仍具实用价值。
第 2-1 课：列表滚动组件详解（CustomScrollView、ListView、ScrollView、ExpansionPanel）...
持续学习中
09-22 1616
这节课将继续讲解 Flutter 的常用组件中的列表滚动组件。 在实际开发中，会经常涉及到列表滚动。在 Flutter 中可以滚动的组件容器有很多，如 ScrollView、ListView、GridView、CustomScrollView 等等。那么这节课就带领大家对 Flutter 的常用组件中的列表滚动组件进行详细分析讲解，并结合案例进行详细的用法讲解。 本文将主要介绍： Cu...
Windows图标－Icon文件格式分析。
业余编程
10-09 7316
[原创]Windows图标－Icon文件格式分析。最近想做个随时间变化显示为时间的秒数的动态变化图标，查找了很多资料，基本都是使用BitBlt＋BuildIcon或CreateIcon等API函数来生成图标，感觉操作过程比较复杂，而且在Picture使用这些函数制造图标的话，运行效果不太理想，因此想到用现有的BMP位图数据换算为ICON文件保存后再用LoadPicture载入后使用还比较合用。找了...
ICON结构解析(订正版)
kilrogg的专栏
03-07 1577
ICON的结构解析原作者不详,感谢一下,原文章有一些技术错误,做了些修正,---kilroy   20090307 一、从图标的显示原理说起　　每个图标都是由两个单独的位图组成的。如果该图标是屏蔽背景色的话，那么，第一个位图是由黑色背景（相关的颜色位全为 0）与彩色图标图案组成的，该位图将与当前屏幕显示通过异或操作（XOR）结合起来，故称其为XOR位图；第二个位图是由白色背景（相关
icon结构解析
珍惜
05-06 2079
icon合并 – 文件结构 要合并icon，就要明白ICON文件的格式。首先是文件头。由于一个ico文件可以包含多个icon，为了表示的方便，就在文件头部用了一个目录结构 ICONDIR：typedef struct{    WORD   idReserved;   // Reserved (must be 0)    WORD   idType;       // Resource Typ...
图标（ico，cur）文件的结构解析
chenyujing1234的专栏
04-04 6774
因为编写一个图标编辑程序，分析了一下图标的文件格式，颇有一些心得，写出 来与各位兄弟共享。（笔者注：以下所说的图标均为调色板模式的图标，真彩图标会特别注  明） 一、从图标的显示原理说起  　　每个图标都是由两个单独的位图组成的。如果该图标是屏蔽背景色的话，那么，第一个位图是由黑色背景（相关的颜色位全为 0）与彩色图标图案组成的，该位图将与当前屏幕显示通过异或操作（XOR）结合起来，故称
Flutter 常用组件详解：Text、Button、Image、ListView 和 GridView
vvilkin的学习备忘
06-11 940
Flutter 作为 Google 推出的跨平台 UI 框架，凭借其高效的渲染性能和丰富的组件库，已经成为移动应用开发的热门选择。本文将深入探讨 Flutter 中最常用的五个基础组件：Text、Button、Image、ListView 和 GridView，帮助开发者快速掌握 Flutter UI 开发的核心技能。
javafx组件详解
zp的博客
08-22 1572
1 组件相关API类图 1.1 EventTarget相关类 #mermaid-svg-wc4eu3a4AJs3C1GN {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-wc4eu3a4AJs3C1GN .error-icon{fill:#552222;}#mermaid-svg-wc4eu3a4AJs3C1GN .error-text{fill:#552222;strok
Flutter 基础组件 Image 详解
帅次的博客
03-12 2328
Image 组件是 Flutter 中用于显示图片的核心组件，它支持多种图片来源（本地、网络、资源文件等），并提供丰富的调整选项，如缩放、适应模式、缓存等。本文将详细介绍 Image 组件的使用方式及其重要参数。
Flutter 常用组件详解：构建用户界面的基石
源滚滚编程
02-18 695
Flutter 的组件生态系统非常丰富，开发者可以根据自己的需求选择合适的组件来构建用户界面。通过不断学习和实践，开发者可以掌握 Flutter 组件的精髓，构建出更美观、更易用的 Flutter 应用。Flutter 提供了丰富的内置组件，涵盖了构建用户界面所需的各个方面。Flutter 提供了丰富的内置组件，涵盖了构建用户界面所需的各个方面。除了上述常用组件，Flutter 还提供了一些进阶组件，可以帮助开发者构建更复杂的用户界面。
Flutter ListView （动态）列表组件、水平列表组件、图标组件详解
小青蛙的博客
02-25 2090
Flutter ListView （动态）列表组件、水平列表组件、图标组件 Flutter ListView 基础列表组件、水平列表组件、图标组件 列表常见的几种情况： 垂直列表 垂直图文列表 横向列表 动态列表 ListView组件常用的参数： scrollDirection: Axis, Axis.horizontal 横向列表 Axis.vertical 垂直列表(默认垂直列表) p...
Flutter开发 网络请求
来来来，走一走
08-16 388
本文介绍了Dart中的两种HTTP请求方式：原生HttpClient和第三方http库。通过代码示例展示了GET和POST请求的实现，包括请求发送、响应处理和JSON/XML数据解析。GET请求示例展示了如何获取并解析单词数据，POST请求演示了如何设置请求头和发送JSON数据。此外还介绍了XML解析方法，展示了如何从XML文档中提取书籍信息。这些示例覆盖了网络请求的主要场景，为Dart开发者提供了实用的参考实现。
Flutter开发 webview_flutter的基本使用
来来来，走一走
08-15 237
Flutter实现WebView功能需要使用webview_flutter插件，该插件支持iOS和Android平台。实现步骤包括：1）添加Android网络权限；2）引入webview_flutter插件依赖；3）通过WebViewController配置JavaScript模式、导航委托等参数，可控制页面加载行为和URL拦截；4）使用WebViewWidget展示网页内容。示例代码展示了如何加载指定URL并实现基本功能，包括页面加载事件处理和特定网站（如YouTube）的访问限制。
Highcharts for Flutter 正式发布
Aaroncoo的博客
08-18 612
2025年年中发布的的，Highcharts for Flutter 已结束测试版，可供生产使用。
Flutter 自定义 Switch 切换组件完全指南
tangweiguo03051987的博客
08-18 309
在 Flutter 中，你可以通过多种方式创建自定义的 Switch 切换组件。下面我将介绍几种实现方法，包括基础实现、自定义样式和完全自定义的 Switch 组件。这些示例展示了从简单到复杂的各种 Switch 实现方式。你可以根据自己的需求选择合适的方法，或者在这些基础上进一步自定义。Flutter 自定义组件：Switch 切换实现。自定义 Switch 实现。使用自定义 Switch。
实践项目-1
ettamei的博客
08-19 857
判断是否有安装好了没，或者是输入mysql，弹出mysql>这样就是安装好了，同样安装应用也是在/usr/bin中哟。然后可以在你创建的工程中的某一个目录中创建一个index.php文件，之后php 运行起来，查看是否能成功。这里我使用etta的账号远程登录了，不过展示出来的目录直接就是根目录，好家伙，修改错了，那我不得重新装系统。这里我安装的时候没有找官网，而是在Linux中输入的mysql，会提示你没有，但是你可以安装对应的版本。这里我连接ftp一直失败，一直用的是root账号，也就以为是配置的问题。
Android 入门到实战（三）：ViewPager及ViewPager2多页面布局
最新发布
weixin_39339407的博客
08-20 356
本文介绍了Android开发中实现多页面滑动切换的两种方案：传统ViewPager及其升级版ViewPager2。重点对比了两种Fragment适配器的区别，详细讲解了ViewPager2的优势和改进特性，包括基于RecyclerView实现、支持垂直滑动等。通过一个Activity+3个Fragment的示例，演示了如何配合TabLayout和FragmentStateAdapter实现滑动标签页效果，并提供了完整代码示例。文章强调ViewPager2作为官方推荐的新方案，在性能、灵活性和扩展性方面都优于
ThinkPHP8学习篇(三)：控制器
zorro_z的博客
08-17 1049
ThinkPHP 支持传统的 MVC（Model-View-Controller）模式以及流行的 MVVM（Model-View-ViewModel）模式的应用开发，在请求流程中，控制器扮演着承上启下的核心角色 —— 它承接路由分发的请求，调度模型进行数据处理，协调视图完成最终渲染，是业务逻辑处理的中枢枢纽。本篇文章将记录 ThinkPHP 控制器的学习过程。
Flutter基础控件详解：Text、Image与Layout组件
**Image** 和 **Icon** 是展示视觉元素的重要部分。Image用于加载和显示图片，而Icon则是预设的矢量图形，可用于快速表示功能或状态。在Flutter中，这些控件可以通过网络请求加载本地图片，或者直接使用内置的图库...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

mylgcs

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值