Flutter自定义尺寸图标按钮插件sized_icon_button的使用

Flutter自定义尺寸图标按钮插件sized_icon_button的使用

sized_icon_button

创建不同大小的图标按钮。

开始使用

安装

在 pubspec.yaml 文件中添加依赖：

dependencies:
  sized_icon_button: <version>

然后运行 flutter pub get。

使用方法

基本用法

SizedIconButton(
  icon: Icon(
    Icons.alarm,
  ),
  onPressed: () {
    print("onPressed");
  },
),

高级用法

SizedIconButton(
  color: Colors.blue.shade100,
  padding: EdgeInsets.all(24),
  tooltip: 'Alarm',
  icon: Icon(
    Icons.alarm,
    color: Colors.black,
    size: 48,
  ),
  onPressed: () {
    print("onPressed");
  },
),

可选参数

final Icon icon;
final Function()? onPressed;
final EdgeInsets? padding;
final bool autofocus;
final Color? splashColor;
final Color? focusColor;
final Color? hoverColor;
final Color? color;
final FocusNode? focusNode;
final String? tooltip;
final Decoration? tooltipDecoration;

完整示例

以下是一个完整的示例，展示了如何在应用中使用 sized_icon_button 插件。

import 'package:flutter/material.dart';
import 'package:sized_icon_button/sized_icon_button.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text("DEMO"),
        ),
        body: Container(
          padding: EdgeInsets.all(16),
          child: Wrap(
            direction: Axis.horizontal,
            spacing: 16,
            children: [
              // 基本用法
              SizedIconButton(
                icon: Icon(
                  Icons.alarm,
                ),
                onPressed: () {
                  print("onPressed");
                },
              ),
              // 不同颜色和大小
              SizedIconButton(
                color: Colors.blue,
                icon: Icon(
                  Icons.accessible,
                  color: Colors.white,
                  size: 32,
                ),
                onPressed: () {
                  print("onPressed");
                },
              ),
              // 更小的图标
              SizedIconButton(
                color: Colors.black12,
                padding: EdgeInsets.all(4),
                icon: Icon(
                  Icons.alarm,
                  size: 14,
                ),
                onPressed: () {
                  print("onPressed");
                },
              ),
              // 带有提示的图标按钮
              SizedIconButton(
                color: Colors.blue.shade100,
                padding: EdgeInsets.all(24),
                tooltip: 'Alarm',
                icon: Icon(
                  Icons.alarm,
                  color: Colors.black,
                  size: 48,
                ),
                onPressed: () {
                  print("onPressed");
                },
              ),
              // 其他样式
              SizedIconButton(
                color: Colors.red,
                icon: Icon(
                  Icons.alarm,
                  color: Colors.white,
                  size: 32,
                ),
                onPressed: () {
                  print("onPressed");
                },
              ),
            ],
          ),
        ),
      ),
    );
  }
}

更多关于Flutter自定义尺寸图标按钮插件sized_icon_button的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter自定义尺寸图标按钮插件sized_icon_button的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


在Flutter中，你可以使用自定义尺寸的图标按钮来满足特定的设计需求。虽然Flutter本身提供了IconButton组件，但有时候你可能需要更灵活地控制按钮的大小。为了实现这一点，你可以创建一个自定义的SizedIconButton组件。

下面是一个简单的SizedIconButton实现示例：

import 'package:flutter/material.dart';

class SizedIconButton extends StatelessWidget {
  final double size;
  final IconData icon;
  final Color? color;
  final VoidCallback? onPressed;

  const SizedIconButton({
    Key? key,
    required this.size,
    required this.icon,
    this.color,
    this.onPressed,
  }) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return SizedBox(
      width: size,
      height: size,
      child: IconButton(
        icon: Icon(icon, color: color),
        onPressed: onPressed,
        padding: EdgeInsets.zero, // 去掉默认的内边距
      ),
    );
  }
}

使用示例

你可以在你的Flutter应用中使用这个自定义的SizedIconButton组件，如下所示：

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('SizedIconButton Example'),
        ),
        body: Center(
          child: SizedIconButton(
            size: 60.0, // 自定义按钮大小
            icon: Icons.favorite,
            color: Colors.red,
            onPressed: () {
              print('Button Pressed!');
            },
          ),
        ),
      ),
    );
  }
}
回到顶部