当前位置：首页 > article >正文

Flutter按钮控件（六）

article 2024/10/28 14:01:06

1、常见按钮

import 'package:flutter/material.dart';

void main() {
  runApp(const MaterialApp(
    home: MyHomePage(title: "按钮控件"),
  ));
}

class MyHomePage extends StatelessWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Center(
          child: Text(title),
        ),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            ElevatedButton(
              onPressed: () {},
              child: const Text("ElevatedButton"),
            ),
            // 在按钮之间添加一个高度为20的盒子，将按钮分开适当距离
            const SizedBox(height: 20),
            TextButton(
              onPressed: () {},
              child: const Text("TextButton"),
            ),
            const SizedBox(height: 20),
            FloatingActionButton(
              onPressed: () {},
              child: const Icon(Icons.account_circle),
            ),
            const SizedBox(height: 20),
            OutlinedButton(
              onPressed: () {},
              child: const Text("OutlinedButton"),
            ),
            const SizedBox(height: 20),
            IconButton(
              onPressed: () {},
              icon: const Icon(Icons.access_alarms_sharp),
            ),
          ],
        ),
      ),
    );
  }
}

ElevatedButton：具有默认样式（如阴影、圆角等）的实心按钮；
TextButton：简单的文本按钮，通常用于对话框或底部表单等位置；
OutlinedButton：与 ElevatedButton 类似，但是没有背景色，只有边框；
IconButton：使用图标而不是文本的按钮；
FloatingActionButton：用于主要的操作，显示为悬浮在屏幕上的圆形按钮；
效果图：

按钮控件

2、自定义按钮样式

以ElevatedButton为例，自定义一些常见属性，具体属性查看文档：https://api.flutter.dev/flutter/material/ElevatedButton-class.html

import 'package:flutter/material.dart';

void main() {
  runApp(const MaterialApp(
    home: MyHomePage(title: "按钮控件"),
  ));
}

class MyHomePage extends StatelessWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Center(
          child: Text(title),
        ),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            ElevatedButton(
              onPressed: () {},
              style: ElevatedButton.styleFrom(
                // 修改文本颜色，也可以直接修改文本颜色
                foregroundColor: Colors.blue,
                // 按钮的背景色
                backgroundColor: Colors.yellow,
                // 点击按钮波纹反馈的颜色
                overlayColor: Colors.grey,
                // 按钮阴影颜色
                shadowColor: Colors.red,
                // 设置按钮圆角
                shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.circular(8.0)),
              ),
              child: const Text("漂浮按钮"),
            )
          ],
        ),
      ),
    );
  }
}