Flutter控件——常用控件：按钮

Posted 2022-12-06 wzj_what_why_how

按钮

Material 组件库中提供了多种按钮组件如ElevatedButton、TextButton、OutlineButton等，它们都是直接或间接对
RawMaterialButton组件的包装定制，所以他们大多数属性都和RawMaterialButton一样。在介绍各个按钮时我们先介绍其默认外观，
而按钮的外观大都可以通过属性来自定义，我们在后面统一介绍这些属性。另外，所有 Material 库中的按钮都有如下相同点：

• 继承于ButtonStyleButton
• 按下时都会有“水波动画”（又称“涟漪动画”，就是点击时按钮上会出现水波扩散的动画）。
• 有一个onPressed属性来设置点击回调，当按钮按下时会执行该回调，如果不提供该回调则按钮会处于禁用状态，禁用状态不响应用户点击。

ElevatedButton

即"漂浮"按钮 它默认带有阴影和灰色背景。按下后，阴影会变大

elevated_button.dart 源码

class ElevatedButton extends ButtonStyleButton 
  const ElevatedButton(
    Key? key,
    required VoidCallback? onPressed,
    VoidCallback? onLongPress,
    ButtonStyle? style,
    FocusNode? focusNode,
    bool autofocus = false,
    Clip clipBehavior = Clip.none,
    required Widget? child,
  ) : super(
    key: key,
    onPressed: onPressed,
    onLongPress: onLongPress,
    style: style,
    focusNode: focusNode,
    autofocus: autofocus,
    clipBehavior: clipBehavior,
    child: child,
  );

• 它有两个最基本的属性：
  • child：可以放入容器，图标，文字。让你构建多彩的按钮。
  • onPressed：点击事件的相应，一般会调用Navigator组件。

eg：

ElevatedButton(
  child: Text("查看商品详情"),
  onPressed: ()
    Navigator.push(context, MaterialPageRoute(
        builder: (context)=> SecondScreen())
    );
  ,
),

TextButton

即文本按钮，默认背景透明并不带阴影。按下后，会有背景色

text_button.dart 源码

class TextButton extends ButtonStyleButton 
  const TextButton(
    Key? key,
    required VoidCallback? onPressed,
    VoidCallback? onLongPress,
    ButtonStyle? style,
    FocusNode? focusNode,
    bool autofocus = false,
    Clip clipBehavior = Clip.none,
    required Widget child,
  )

IconButton

是一个可点击的Icon，不包括文字，默认没有背景，点击后会出现背景。

class IconButton extends StatelessWidget 
  const IconButton(
    Key? key,
    this.iconSize = 24.0,
    this.visualDensity,
    this.padding = const EdgeInsets.all(8.0),
    this.alignment = Alignment.center,
    this.splashRadius,
    this.color,
    this.focusColor,
    this.hoverColor,
    this.highlightColor,
    this.splashColor,
    this.disabledColor,
    required this.onPressed,
    this.mouseCursor = SystemMouseCursors.click,
    this.focusNode,
    this.autofocus = false,
    this.tooltip,
    this.enableFeedback = true,
    this.constraints,
    required this.icon,
  )

3.2.5 带图标的按钮

ElevatedButton、TextButton都有一个icon 构造函数，通过它可以轻松创建带图标的按钮
eg：

ElevatedButton.icon(
  icon: Icon(Icons.send),
  label: Text("发送"),
  onPressed: _onPressed,
),
TextButton.icon(
  icon: Icon(Icons.info),
  label: Text("详情"),
  onPressed: _onPressed,
),

• 已经弃用的组件 RaisedButton： 技术胖：https://jspang.com/article/44#toc32
• 已经弃用的组件 OutlineButton