一统天下 flutter - widget 按钮类: IconButton - 图标按钮

发布时间 2023-03-22 21:14:10作者: webabcd

一统天下 flutter https://github.com/webabcd/flutter_demo
作者 webabcd

一统天下 flutter - widget 按钮类: IconButton - 图标按钮

示例如下:

lib\widget\button\icon_button.dart

/*
 * IconButton - 图标按钮
 *
 * 图标相关请参见 lib/widget/media/icon.dart
 */

import 'package:flutter/material.dart';

class IconButtonDemo extends StatelessWidget {
  const IconButtonDemo({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    /// 注:IconButton 必须放到一个 Material 组件内,否则会报错
    return Scaffold(
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          IconButton(
            onPressed: () { },                    /// 单击事件,此为 required 字段(设置为 null 则代表按钮是 disable 状态)
            icon: const Icon(                     /// 图标
                Icons.favorite,
                size: 24
            ),
            padding: const EdgeInsets.all(0),     /// 内边距
            alignment: Alignment.center,          /// 对齐方式
            color: Colors.red,                    /// 颜色
            highlightColor: Colors.green,         /// 点击时动画效果的颜色
          ),
          IconButton(
            onPressed: () { },
            icon: const Icon(Icons.favorite, size: 24),
            padding: const EdgeInsets.all(0),
            alignment: Alignment.centerLeft,
            color: Colors.red,
            splashColor: Colors.green,            /// 点击时动画效果的颜色
          ),
          const IconButton(
            onPressed: null,                      /// disable 状态的按钮
            icon: Icon(Icons.favorite, size: 24),
            padding: EdgeInsets.all(0),
            alignment: Alignment.centerRight,
            color: Colors.red,
            disabledColor: Colors.green,          /// 按钮 disable 状态时的颜色
          ),
        ],
      ),
    );
  }
}

一统天下 flutter https://github.com/webabcd/flutter_demo
作者 webabcd