首页 > 其他分享 >一统天下 flutter - widget 媒体类: Icon - 图标

一统天下 flutter - widget 媒体类: Icon - 图标

时间:2023-03-22 10:48:25浏览次数:47  
标签:widget Icons favorite 一统天下 Icon flutter 图标

一统天下 flutter https://github.com/webabcd/flutter_demo
作者 webabcd

一统天下 flutter - widget 媒体类: Icon - 图标

示例如下:

lib\widget\media\icon.dart

/*
 * Icon - 图标
 *
 * 注:Icons 中的字体使用的是 Material Design 字体中的图标,需要在 pubspec.yaml 中配置 uses-material-design: true
 */

import 'package:flutter/material.dart';
import 'package:flutter_demo/helper.dart';

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

  @override
  Widget build(BuildContext context) {

    /// 获取 Icons.favorite 图标的编码,结果是 e25b
    log("Icons.favorite: ${Icons.favorite.codePoint.toRadixString(16)}");

    return Column(
      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
      children: const [
        /// Icon - 图标(使用的是 Material Design 字体中的图标)
        Icon(
          Icons.favorite,         /// 图标类型(一个 IconData 类型的对象)
          color: Colors.orange,   /// 颜色
          size: 48,               /// 大小
        ),
        Text(
          "\uE25B",               /// Icons.favorite 的编码是 E25B,所以可以通过 Text 显示这个图标(注:fontFamily 要设置为 MaterialIcons)
          style: TextStyle(
            fontFamily: "MaterialIcons",
            fontSize: 48,
            color: Colors.orange,
            decoration: TextDecoration.none,
          ),
        ),
        Icon(
          IconData(               /// 可以自定义 IconData 对象(比如你想使用自己的字体文件中的图标,除了直接通过 Text 的方式显示外,也可以用此方式封装以方便使用)
            0xE25B,
            fontFamily: "MaterialIcons",
          ),
          color: Colors.orange,
          size: 48,
        ),
      ],
    );
  }
}

一统天下 flutter https://github.com/webabcd/flutter_demo
作者 webabcd

标签:widget,Icons,favorite,一统天下,Icon,flutter,图标
From: https://www.cnblogs.com/webabcd/p/flutter_lib_widget_media_icon.html

相关文章