Flutter 系列文章：Flutter Icon 控件介绍

小灰灰 2022-01-12 02:41 473阅读 0赞

# Flutter Icon 控件介绍 #

#### 一、使用方法 ####

*  构造方法

Icon(this.icon, {
            Key key,
            this.size,
            this.color,
            this.semanticLabel,
            this.textDirection,
          })
    复制代码

#### 二、常用的属性 ####

Icon(
          Icons.access_alarm,//设置使用哪种图标
          size: 300,//设置图标大小
          color: Colors.yellow,//设置图标颜色
          textDirection:TextDirection.rtl ,//设置用于渲染图标的文本方向
          semanticLabel: "语义标签",//设置用于渲染图标的文本方向
        )
    复制代码

#### 三、一个完整的例子 ####

import 'package:flutter/material.dart';
    
    void main() => runApp(MyApp());
    
    class MyApp extends StatelessWidget{
    
      @override
      Widget build(BuildContext context) {
        return MaterialApp(
          title: 'Text Demo',
          theme: ThemeData(
              primarySwatch: Colors.green
          ),
          home: MyHomePage(title: 'Text Demo'),
        );
      }
    }
    
    
    class MyHomePage extends StatefulWidget {
      MyHomePage({Key key, this.title}) : super(key: key);
      final String title;
    
      @override
      _MyHomePageState createState() => _MyHomePageState();
    }
    
    class _MyHomePageState extends State<MyHomePage>{
    
      @override
      Widget build(BuildContext context) {
        var _name = "flutter ";
        return Scaffold(
          appBar: AppBar(
            title: Text(widget.title),
          ),
          body: Container(
            width: MediaQuery.of(context).size.width,
            height: MediaQuery.of(context).size.height,
            child: ListView(
              children: <Widget>[
                Icon(
                  Icons.access_alarm,//设置使用哪种图标
                  size: 300,//设置图标大小
                  color: Colors.yellow,//设置图标颜色
                  textDirection:TextDirection.rtl ,//设置用于渲染图标的文本方向
                  semanticLabel: "语义标签",//设置用于渲染图标的文本方向
                ),
                Icon(
                  Icons.accessibility_new,
                  size: 300,
                  color: Colors.blue,
                  textDirection:TextDirection.ltr ,
                ),
                Icon(
                  Icons.build,
                  size: 300,
                  color: Colors.green,
                  textDirection:TextDirection.ltr ,
                )
              ],
    
            ),
          ),
        );
      }
    }
    
    
    
    复制代码

转载于:https://juejin.im/post/5c909c0af265da60f16316b2