关注我们

Flutter - Icons

Flutter提供了一个图标小部件(Icon Widget)，用于在无涯教程的应用程序中创建图标。无涯教程可以使用内置图标或自定义图标在Flutter中创建图标。 Flutter提供了Icons类中所有图标的列表。在本文中，无涯教程将学习如何在应用程序中使用Flutter图标。

Icon Widget属性

Flutter图标小组件具有不同的属性来定制图标。这些属性如下所述:

属性	描述
icon	它用于指定要在应用程序中显示的图标名称。
color	它用于指定图标的颜色。
size	它用于指定像素中的图标的大小。
textdirection	它用于指定图标将呈现的方向。

让无涯教程使用不同的示例来了解Flutter图标。

示例1:

在此示例中，无涯教程将看到具有默认值的基本图标小部件。首先，在IDE中创建一个项目，导航到lib文件夹，然后打开main.dart文件。现在，在main.dart文件中替换以下代码：

复制代码

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
 //这个小部件是您的应用程序的根。
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyIconPage(),
    );
  }
}

class MyIconPage extends StatefulWidget {
  @override
  _MyIconPageState createState() => _MyIconPageState();
}

class _MyIconPageState extends State<MyIconPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Icon Tutorial'),
      ),
      body: Row(
        mainAxisAlignment: MainAxisAlignment.spaceAround,
          children: <Widget>[
            Icon(Icons.camera_enhance),
            Icon(Icons.camera_front),
            Icon(Icons.camera_rear),
      ]),
    );
  }
}

运行此项目时，它将显示类似于无涯教程正在使用的模拟器或设备中的以下屏幕截图的UI:

示例2:

在此示例中，无涯教程将看到如何自定义图标。在这里，无涯教程将使用 size属性根据无涯教程的需求调整图标大小。无涯教程还将看到 color属性更改图标默认颜色。因此，打开main.dart文件并用以下代码替换它:

复制代码

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
 //这个小部件是您的应用程序的根。
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyIconPage(),
    );
  }
}

class MyIconPage extends StatefulWidget {
  @override
  _MyIconPageState createState() => _MyIconPageState();
}

class _MyIconPageState extends State<MyIconPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Icon Tutorial'),
      ),
      body: Row(
        mainAxisAlignment: MainAxisAlignment.spaceAround,
          children: <Widget>[
            Icon(
              Icons.camera_enhance,
              size: 70,
              color:Colors.green
            ),
            Icon(
              Icons.camera_front,
              size: 70,
              color:Colors.orange
            ),
            Icon(
              Icons.camera_rear,
              size: 70,
              color:Colors.black
            ),
      ]),
    );
  }
}

运行此项目时，它将显示类似于无涯教程正在使用的模拟器或设备中的以下屏幕截图的UI:

示例3:

大多数时候，无涯教程已经看到图标始终包含它在无涯教程的应用程序下方的文本。在此示例中，无涯教程将看到如何使用图标窗口小部件使用Text Widget。因此，打开main.dart文件并用以下代码替换它:

复制代码

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyIconPage(),
    );
  }
}

class MyIconPage extends StatefulWidget {
  @override
  _MyIconPageState createState() => _MyIconPageState();
}

class _MyIconPageState extends State<MyIconPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Icon Tutorial'),
      ),
      body: Column(children: <Widget>[
        //下方带有标签的图标
        Container(
          padding: EdgeInsets.all(30),
          child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceAround,
              children: <Widget>[
                Column(children: <Widget>[
                  Icon(
                    Icons.camera_front,
                    size: 70
                  ),
                  Text('Front Camera'),
                ]),
                Column(children: <Widget>[
                  Icon(
                      Icons.camera_enhance,
                      size: 70
                  ),
                  Text('Camera'),
                ]),
                Column(children: <Widget>[
                  Icon(
                      Icons.camera_rear,
                      size: 70
                  ),
                  Text('Rear Camera'),
                ]),
              ]
            ),
          )
        ],
      )
    );
  }
}