Flutter 1.22中的全新Button：简化自定义体验

Android

2023-10-14 08:14:59

理解Button的动机

在Flutter 1.22之前，自定义按钮外观是一项复杂的任务。开发人员经常诉诸于创建自定义按钮小部件，这既耗时又容易出错。Button的引入解决了这一痛点，提供了统一的外观，可以轻松调整以匹配任何应用程序的品牌或设计指南。

Button的基本概念

Button本质上是三个现有按钮小部件的包装器：TextButton、OutlinedButton和ElevatedButton。它允许您为这三个按钮类型指定统一的样式，简化了外观自定义并确保应用程序中按钮的一致性。

自定义Button的外观

通过Button小部件的theme属性，您可以定义按钮的各个方面，包括：

背景颜色和形状： 使用color和shape属性自定义按钮的背景。
边框： 使用borderSide属性控制按钮的边框。
阴影： 使用elevation属性添加阴影以创建凸起效果。
文本样式： 使用textStyle属性调整按钮上文本的外观。

Button在实践中的应用

要使用Button，只需在您的Flutter应用程序中导入material.dart库并使用主题属性：

import 'package:flutter/material.dart';

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        buttonTheme: ButtonThemeData(
          colorScheme: ColorScheme.light(primary: Colors.blue),
          shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(8.0)),
        ),
      ),
      home: Scaffold(
        body: Center(
          child: Button(
            onPressed: () {},
            child: Text('Click Me'),
          ),
        ),
      ),
    );
  }
}