4. Flutter - 基础组件之 Button

2021-03-15 本文已影响0人 Aliv丶Zz

Flutter中常见的Button类型有 FlatButton、 RaisedButton、 OutlineButton ，三者均继承自 MaterialButton ，MaterialButton是Material 风格按钮，不推荐直接使用，且内部实现主要通过Theme 、 ButtonTheme进行设置。

MaterialButton build 方法实现截取:

  Widget build(BuildContext context) {
    final ThemeData theme = Theme.of(context);
    final ButtonThemeData buttonTheme = ButtonTheme.of(context);

    return RawMaterialButton(
      ...
      fillColor: buttonTheme.getFillColor(this),
      textStyle: theme.textTheme.button
          .copyWith(color: buttonTheme.getTextColor(this)),
      ...
    );
  }

文档中有这样一段描述：

FlatButton, RaisedButton, and OutlineButton have been replaced by
TextButton, ElevatedButton, and OutlinedButton respectively.

ButtonTheme has been replaced by TextButtonTheme,
ElevatedButtonTheme, and OutlinedButtonTheme.

The original classes
will be deprecated soon, please migrate code that uses them.

表明FlatButton、 RaisedButton、 OutlineButton 这三个也快被废除，
分别可以用TextButton, ElevatedButton, 和 OutlinedButton进行替换，后三者均继承自 ButtonStyleButton。

ButtonStyleButton 抽象类

abstract class ButtonStyleButton extends StatefulWidget {
  /// Create a [ButtonStyleButton].
  const ButtonStyleButton({
    Key key,
    @required this.onPressed,
    @required this.onLongPress,
    @required this.style,
    @required this.focusNode,
    @required this.autofocus,
    @required this.clipBehavior,
    @required this.child,
  })

以下部分介绍摘录自：flutter基础之组件基础Text
原文作者：陌问MW
更详细介绍可转至原文查看。

1. MaterialButton属性介绍

const MaterialButton({
  Key key,
  //Function类型必传参数，为当按钮点击时的回调方法，如果为null，按钮将处于禁用状态
  @required this.onPressed,
  //Function类型可选命名参数，为当长按按钮时的回调方法
  this.onLongPress,
  //Function类型可选命名参数，为当按钮突出(高亮)显示或停止突出显示时调用的回调方法，参数bool类型
  this.onHighlightChanged,
  //ButtonTextTheme类型可选命名参数，用来定义按钮的基本颜色，最小尺寸，内部填充和形状的默认值
  this.textTheme,
  //Color类型可选命名参数，为按钮文本的颜色
  this.textColor,
  //Color类型可选命名参数，为按钮禁用时的按钮文本的颜色
  this.disabledTextColor,
  //Color类型可选命名参数，按钮状态为可用时且未被点击时的填充色
  this.color,
  //Color类型可选命名参数，为按钮禁用时的按钮填充颜色
  this.disabledColor,
  //Color类型可选命名参数，当按钮具有输入焦点时的填充颜色
  this.focusColor,
  //Color类型可选命名参数，指针悬停在按钮上时的填充颜色
  this.hoverColor,
  //Color类型可选命名参数，用于设置按钮的高亮颜色
  this.highlightColor,
  //Color类型可选命名参数，按钮点击时水波纹效果的颜色
  this.splashColor,
  //Brightness类型可选命名参数，用于设置按钮的主题亮度
  this.colorBrightness,
  //double类型可选命名参数，相对于其父级放置此按钮的z坐标，可用于控制凸起按钮下方的
  //阴影大小，默认值为2，不能为负数
  this.elevation,
  //double类型可选命名参数，当按钮启用并具有焦点时，按钮的elevation
  this.focusElevation,
  //double类型可选命名参数，当按钮启用且指针悬停在按钮上方时，按钮的按钮的elevation
  this.hoverElevation,
  //double类型可选命名参数，按钮为启用状态并被按下时其相对于父级的高程
  this.highlightElevation,
  //double类型可选命名参数，当按钮为不可用状态时其相对于父级的高程
  this.disabledElevation,
  //EdgeInsetsGeometry类型可选命名参数，设置按钮的内边距
  this.padding,
  //ShapeBorder类型可选命名参数，设置按钮形状
  this.shape,
  //Clip类型可选命名参数，用于设置内容将被如何裁剪
  this.clipBehavior = Clip.none,
    //FocusNode类型可选命名参数，按钮的焦点节点  
  this.focusNode,
  //bool类型可选命名命名参数，用于设置是否按钮为当前焦点
  this.autofocus = false,
  //MaterialTapTargetSize类型可选命名参数，设置按钮的最小点击尺寸
  this.materialTapTargetSize,
  //Duration类型可选命名参数，用于定义按钮形状或高亮变化的动画的持续时间
  this.animationDuration
  //double类型可选命名参数，按钮的最小宽度
  this.minWidth,
  //double类型可选命名参数，按钮的高度
  this.height,
  //bool类型可选命名参数，当检测到手势时，是否提供听觉视觉的反馈
  this.enableFeedback = true,
  //Widget类型可选命名参数，是为按钮设置的显示标签，可以为任意Widget，通常使用Text
  this.child,
})

2. ButtonStyleButton属性介绍

abstract class ButtonStyleButton extends StatefulWidget {
  /// Create a [ButtonStyleButton].
  const ButtonStyleButton({
    Key key,
    // VoidCallback类型可选命名参数
    // typedef VoidCallback = void Function();
    @required this.onPressed,
    // 同上
    @required this.onLongPress,
    // ButtonStyle 类型
    @required this.style,
    //FocusNode 类型
    @required this.focusNode,
    //bool
    @required this.autofocus,
    //Clip
    @required this.clipBehavior,
    //Widget
    @required this.child,
  })

3. 使用示例

3.1 FlatButton / TextButton

FlatButton

//FlatButton  ---- >  TextButton
class FlatButtonDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return FlatButton(
      child: Row(
        mainAxisSize: MainAxisSize.min,
        children: [
          Image(
            image: AssetImage('assets/images/xk.jpg'),
            width: 40,
            height: 40,
          ),
          Text('平的按钮', style: TextStyle(fontSize: 20)),
        ],
      ),
      textColor: Colors.red,
      color: Colors.grey,
      textTheme: ButtonTextTheme.accent,
      materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
      onPressed: () {
        print('FlatButton_onPressed');
      },
    );
  }
}

TextButton

class TextButtonDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return TextButton(
        onPressed: () {
          print('textButton');
        },
        child: Row(
          mainAxisSize: MainAxisSize.min,
          children: [
            Image(
              image: AssetImage('assets/images/xk.jpg'),
              width: 40,
              height: 40,
            ),
            Text('平的按钮')
          ],
        ),
        style: ButtonStyle(
            textStyle: MaterialStateProperty.all(TextStyle(
              color: Colors.white,
              fontSize: 20,
            )),
            backgroundColor:
                MaterialStateColor.resolveWith((states) => Colors.red),
            minimumSize:
                MaterialStateProperty.resolveWith((states) => Size(40, 40)),
            padding: MaterialStateProperty.resolveWith(
                (states) => EdgeInsets.zero)));
  }
}

3.2 RaisedButton / ElevatedButton

RaisedButton

class RaiseButtonDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return RaisedButton(
      child: Text(
        '凸起按钮',
        style: TextStyle(color: Colors.white),
      ),
      color: Colors.red,
      // textColor: Colors.green,
      onPressed: () {
        print('RaisedButton_onPressed');
      },
      onLongPress: () {
        print('RaisedButton_onLongPress');
      },
    );
  }
}

ElevatedButton

class ElevatedButtonDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      child: Text('ElevatedButton'),
      onPressed: () {
        print('ElevatedButton');
      },
    );
  }
}

3.3 OutlineButton / OutlinedButton

OutlineButton

class OutlineButtonDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return OutlineButton(
      child: Text('轮廓'),
      textColor: Colors.blue,
      color: Colors.red,
      onPressed: () {
        print('OutlineButton_onPressed');
      },
    );
  }
}

OutlinedButton


class OutlinedButtonDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return OutlinedButton(
      child: Text('OutlinedButton'),
      onPressed: () {
        print('OutlinedButton');
      },
    );
  }
}

4. 自定义Button

4.1 MaterialButton Widget。

//自定义按钮  带图片文字
class CustomeButton extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialButton(
        onPressed: () {
          print('CustomeButton');
        },
        color: Colors.purple,
        shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(10)),
        child: Row(
          mainAxisSize: MainAxisSize.min,
          children: [
            Icon(
              Icons.favorite,
              color: Colors.red,
            ),
            Text('提交')
          ],
        ));
  }
}

4.2 ButtonTheme Widget

//自定义按钮2 更新默认设置大小及内边距
class CustomeButton2 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ButtonTheme(
      minWidth: 40,
      height: 20,
      padding: EdgeInsets.all(5),
      buttonColor: Colors.green,
      focusColor: Colors.red,
      child: OutlineButton(
        child: Row(
          mainAxisSize: MainAxisSize.min,
          children: [
            Icon(
              Icons.favorite,
              color: Colors.red,
            ),
            Text('提交')
          ],
        ),
        textColor: Colors.blue,
        color: Colors.red,
        onPressed: () {
          print('CustomeButton2');
        },
      ),
    );
  }
}

5. 测试代码

import 'package:flutter/material.dart';

main(List<String> args) {
  runApp(MaterialApp(
    home: Scaffold(
      appBar: AppBar(
        title: Text('基本部件 - Button'),
      ),
      body: Center(
        child: HomeButtonsContent(),
      ),
      floatingActionButton: FloatingActionButtonDemo(),
      floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat,
    ),
  ));
}

class HomeButtonsContent extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.center,
      children: [
        Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [FlatButtonDemo(), TextButtonDemo()],
        ),
        Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [RaiseButtonDemo(), ElevatedButtonDemo()],
        ),
        Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [OutlineButtonDemo(), OutlinedButtonDemo()],
        ),
        CustomeButton(),
        CustomeButton2(),
      ],
    );
  }
}

Button样式

4. Flutter - 基础组件之 Button

1. MaterialButton属性介绍

2. ButtonStyleButton属性介绍

3. 使用示例

3.1 FlatButton / TextButton

FlatButton

TextButton

3.2 RaisedButton / ElevatedButton

RaisedButton

ElevatedButton

3.3 OutlineButton / OutlinedButton

OutlineButton

OutlinedButton

4. 自定义Button

4.1 MaterialButton Widget。

4.2 ButtonTheme Widget

5. 测试代码

猜你喜欢

热点阅读

4. Flutter - 基础组件 之 Button

1. MaterialButton属性介绍

2. ButtonStyleButton属性介绍

3. 使用示例

3.1 FlatButton / TextButton

FlatButton

TextButton

3.2 RaisedButton / ElevatedButton

RaisedButton

ElevatedButton

3.3 OutlineButton / OutlinedButton

OutlineButton

OutlinedButton

4. 自定义Button

4.1 MaterialButton Widget。

4.2 ButtonTheme Widget

5. 测试代码

猜你喜欢

热点阅读

4. Flutter - 基础组件之 Button