Flutter Buttons

直接看代码案例快速入手Flutter

本文介绍TextButton，ElevatedButton，IconButton, FloatingActionButton，CupertinoButton。

🎉下载GitHub仓库，直接体验

ElevatedButton是比较常用的按钮，TextButton是样式简单的按钮，CupertinoButton是iOS样式的按钮，IconButton专门用于显示Icon类里面图标的按钮，FloatingActionButton是安卓样式的圆形按钮。

ElevatedButton

ElevatedButton(
    onPressed: () {
    debugPrint("click");
    },
    child: const Text('Click Me'),
),
ElevatedButton(
    onPressed: () {
    // 处理按钮点击事件
    debugPrint("click");
    },
    style: ElevatedButton.styleFrom(
    foregroundColor: Colors.black,
    backgroundColor: Colors.blue,
    disabledForegroundColor: Colors.white,
    elevation: 5, // 设置按钮阴影
    shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(10), // 设置按钮圆角
    ),
    padding: const EdgeInsets.symmetric(
        horizontal: 30, vertical: 10), // 设置按钮内边距
    ),
    child: const Text('Click Me 2'),
),
ElevatedButton(
    onPressed: null,
    style: ElevatedButton.styleFrom(
    foregroundColor: Colors.black,
    backgroundColor: Colors.blue,
    disabledForegroundColor: Colors.white,
    disabledBackgroundColor: Colors.grey,
    elevation: 5, // 设置按钮阴影
    shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(10), // 设置按钮圆角
    ),
    padding: const EdgeInsets.symmetric(
        horizontal: 30, vertical: 10), // 设置按钮内边距
    ),
    child: const Text('Disable button'),
),
ElevatedButton.icon(
    style: ElevatedButton.styleFrom(
        fixedSize: const Size(120, 60), alignment: Alignment.center),
    onPressed: () {
    // 处理按钮点击事件
    const Text('Click Me 1');
    },
    icon:
        Image.asset('images/moon.jpg', width: 50, height: 50), // 添加图标
    label: const Text('Add'),
),
ElevatedButton(
    onPressed: () {
        debugPrint('Button pressed');
    },
    child: Column(
        mainAxisSize: MainAxisSize.min,
        children: [
        Image.asset('images/moon.jpg', width: 50, height: 50),
        const Text('Add'),
        ],
    )),
ElevatedButton(
    onPressed:
        _isButtonEnabled ? () => debugPrint('Button pressed') : null,
    child: const Text('Enabled/Disabled Button'),
),
ElevatedButton(
    onPressed: () {
    setState(() {
        _isButtonEnabled = !_isButtonEnabled;
    });
    },
    child: const Text('Toggle Button'),
),

TextButton

TextButton(
    onPressed: () {
    debugPrint('Button click');
    },
    child: const Text('Click Me'),
),
TextButton(
    onPressed: () {
    // 处理按钮点击事件
    },
    style: TextButton.styleFrom(
    foregroundColor: Colors.white,
    backgroundColor: Colors.blue,
    shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(10), // 设置按钮圆角
    ),
    padding: const EdgeInsets.symmetric(
        horizontal: 30, vertical: 10), // 设置按钮内边距
    ),
    child: const Text('Click Me'),
),
const TextButton(
    onPressed: null, // 设置为null表示禁用按钮
    child: Text('Disabled Button'),
),
TextButton.icon(
    onPressed: () {
    // 处理按钮点击事件
    },
    icon: const Icon(Icons.add), // 添加图标
    label: const Text('Add'),
)

CupertinoButton

CupertinoButton(
    onPressed: () {
    debugPrint("click");
    },
    child: const Text('Click Me'),
),
CupertinoButton(
    color: Colors.blue,
    disabledColor: Colors.grey,
    onPressed: () {
    // 处理按钮点击事件
    debugPrint("click");
    },
    child: const Text('Click Me 2'),
),
const CupertinoButton(
    onPressed: null,
    child: Text('Disable button'),
),
CupertinoButton(
    onPressed: () {
        debugPrint('Button pressed');
    },
    child: Column(
        mainAxisSize: MainAxisSize.min,
        children: [
        Image.asset('images/moon.jpg', width: 50, height: 50),
        const Text('Add'),
        ],
    )),
CupertinoButton(
    color: Colors.blue,
    disabledColor: Colors.grey,
    onPressed:
        _isButtonEnabled ? () => debugPrint('Button pressed') : null,
    child: const Text('Enabled/Disabled Button'),
),
CupertinoButton(
    onPressed: () {
    setState(() {
        _isButtonEnabled = !_isButtonEnabled;
    });
    },
    child: const Text('Toggle Button'),
),

IconButton

Icon(Icons.favorite),
Icon(
    Icons.favorite,
    color: Colors.red,
),
Icon(
    Icons.favorite,
    size: 30.0,
),
Icon(
    FontAwesomeIcons.applePay, // 使用FontAwesome的Github图标
    size: 30.0,
    color: Colors.blue,
)

FloatingActionButton

FloatingActionButton(
    onPressed: () {
    // 处理按钮点击事件
    },
    child: const Icon(Icons.add),
),
FloatingActionButton(
    onPressed: () {
    // 处理按钮点击事件
    },
    backgroundColor: Colors.black, // 设置按钮背景颜色
    foregroundColor: Colors.blue,
    child: const Icon(Icons.add), // 设置按钮前景颜色（图标颜色）
),
FloatingActionButton(
    onPressed: () {
    // 处理按钮点击事件
    },
    mini: true, // 设置为较小尺寸的按钮
    child: const Icon(Icons.add),
),
FloatingActionButton.extended(
    onPressed: () {
    // 处理按钮点击事件
    },
    icon: const Icon(Icons.add), // 添加图标
    label: const Text('Add'), // 添加标签
),
FloatingActionButton(
    onPressed: () {
    // 处理按钮点击事件
    },
    shape: RoundedRectangleBorder(
    borderRadius: BorderRadius.circular(10), // 设置按钮圆角
    ),
    child: const Icon(Icons.add),
)