Flutter IconButton

在Flutter中，IconButton是Material Design风格的一个小部件，它是一个带有图标的按钮，可以用来触发用户交互。本文将为大家介绍IconButton的用法，并且会提供一些例子帮助大家更好地理解。

如何使用IconButton

IconButton是Flutter中的一个内置部件，只需要导入'Material'包，即可使用。

import 'package:flutter/material.dart';

使用IconButton需要先构建一个图标，然后再将其传递给IconButton中。

IconButton(
  icon: Icon(Icons.favorite),
  onPressed: () {},
),

IconButton有一些可选参数，可以根据需要来使用：

• iconSize: 将图标缩放到指定大小
• color: IconButton的颜色
• onPressed: 点击按钮后触发的事件

IconButton(
  icon: Icon(Icons.share),
  color: Colors.blue,
  iconSize: 30,
  onPressed: () {
     // 处理点击事件
  },
),

IconButton的例子

下面是一些使用IconButton的例子。

右上角分享按钮

Scaffold(
  appBar: AppBar(
    title: Text('My App'),
    actions: [
      IconButton(
        icon: Icon(Icons.share),
        onPressed: () {
          // 处理点击事件
        },
      ),
    ],
  ),
  body: Center(
    child: Text('Hello, World!'),
  ),
)

切换亮暗模式

bool isDarkMode = false;

IconButton(
  icon: Icon(
    isDarkMode ? Icons.light_mode : Icons.dark_mode,
  ),
  onPressed: () {
    setState(() {
      isDarkMode = !isDarkMode;
    });
  },
),

快捷拨打电话

IconButton(
  icon: Icon(
    Icons.call,
    color: Colors.green,
  ),
  onPressed: () async {
    final url = 'tel:123456789';
    if (await canLaunch(url)) {
      await launch(url);
    } else {
      throw 'Could not launch $url';
    }
  },
),

通过这些例子，相信大家已经能够掌握IconButton的基本用法了。如果你还想了解更多关于Flutter的内容，可以去Flutter官网深入学习。