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

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