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 ,
            )
          ],

        ),
      ),
    );
  }
}



複製程式碼