简介

Outline button “边框按钮”

RaisedButton和FlatButton之间的交叉：一个有边框的按钮，当按下按钮时，其高度增加，背景变得不透明；
高程最初为0.0，其背景颜色为透明。按下按钮时，其背景变为不透明，然后其高程增加到highlightElevation；

基本用法

参数的默认的 button 和禁用 button

如果onPressed回调为null，则该按钮将被禁用，不会对触摸做出反应，并且将按 disabledColor 属性而不是color属性指定的颜色进行着色；
如果您尝试更改按钮的颜色并且没有任何效果，请检查您是否正在传递非null onPressed处理程序；""";

进阶用法1

OutlineButton.icon 的用法，按钮图标和标签的widget创建文本按钮""";

进阶用法2

更改参数的自定义,比如:边框，点击效果，内容文字,颜色,圆角等；

Outline buttons 按钮有一个边框，其形状由形状定义，其外观由borderSide，disabledBorderColor 和 highlightedBorderColor 定义；
如果您想要 ink-splash 效果，但又不想使用 button ，请考虑直接使用 InkWell；
Outline buttons 的最小尺寸为88.0×36.0，可以用 ButtonTheme 覆盖；
通过 shape 属性的设置，改变边框样式和圆角;
可以尝试长按按钮，button 突出显示;

实例演示

import 'dart:math';
import 'package:flutter/material.dart';

/*
* OutlineButton 默认按钮的实例
* isDisabled:是否是禁用，isDisabled 默认为true
* */
class OutlineButtonDefault extends StatelessWidget {
  final bool isDisabled;

  const OutlineButtonDefault([ this.isDisabled = true])
      : assert(isDisabled != null),
        super();

  @override
  Widget build(BuildContext context) {
    return OutlineButton(
        // 文本内容
        child: const Text('默认按钮', semanticsLabel: 'FLAT BUTTON 1'),
        onPressed: isDisabled ? () {} : null);
  }
}

/*
* OutlineButton.icon 默认按钮的实例
* Create a text button from a pair of widgets that serve as the button's icon and label
* isDisabled:是否是禁用
* */
class OutlineButtonIconDefault extends StatelessWidget {
  final bool isDisabled;
  final IconData icon;

  const OutlineButtonIconDefault(
      [ this.isDisabled = true,  this.icon = Icons.add_circle])
      : super();

  @override
  Widget build(BuildContext context) {
    return OutlineButton.icon(
        // 文本内容
        icon: Icon(icon, size: 25.0, color: _randomColor()),
        label: Text('默认按钮', semanticsLabel: 'FLAT BUTTON 2'),
        onPressed: isDisabled
            ? () {
                //_showMessage('点击了 FLAT BUTTON ', context);
              }
            : null);
  }
}

/*
* OutlineButton 自定义的实例
* */
class OutlineButtonCustom extends StatelessWidget {
  final String txt;
  final Color color;
  final ShapeBorder shape;
  final VoidCallback onPressed;

  const OutlineButtonCustom(
      [ this.txt = '自定义按钮',
       this.color = Colors.blueAccent,
       this.shape,
       this.onPressed])
      : super();

  @override
  Widget build(BuildContext context) {
    final _onPressed = onPressed;
    return OutlineButton(
        // 文本内容
        child: Text(txt, semanticsLabel: 'FLAT BUTTON 2'),
        // 边框的颜色,颜色也可以走主题色 Theme.of(context).primaryColor
        borderSide: BorderSide(color: _randomColor(),width:Random.secure().nextInt(10).toDouble()),
        // 按钮颜色
        color: _randomColor(),
        // 按钮失效时边框颜色
        disabledBorderColor: Colors.red,
        highlightedBorderColor:Colors.black54,
        // 高亮时的背景色
        highlightColor: Colors.yellow,
        // 失效时的背景色
        //disabledColor: Colors.grey,
        // 该按钮上的文字颜色，但是前提是不设置字体自身的颜色时才会起作用
        textColor: _randomColor(),
        // 按钮失效时的文字颜色，同样的不能使用文本自己的样式或者颜色时才会起作用
        disabledTextColor: _randomColor(),
        // 按钮主题,主要用于与ButtonTheme和ButtonThemeData一起使用来定义按钮的基色,OutlineButton，OutlineButton，OutlineButton，它们是基于环境ButtonTheme配置的
        //ButtonTextTheme.accent，使用模版颜色的;ButtonTextTheme.normal，按钮文本是黑色或白色取决于。ThemeData.brightness;ButtonTextTheme.primary，按钮文本基于。ThemeData.primaryColor.
        textTheme: ButtonTextTheme.normal,
        // 按钮内部,墨汁飞溅的颜色,点击按钮时的渐变背景色，当你不设置高亮背景时才会看的更清楚
        splashColor: _randomColor(),
        // 抗锯齿能力,抗锯齿等级依次递增,none（默认),hardEdge,antiAliasWithSaveLayer,antiAlias
        clipBehavior: Clip.antiAlias,
        padding:  EdgeInsets.only(bottom: 5.0, top: 5.0, left: 30.0, right: 30.0),
        //高亮时候的阴影
        highlightElevation: 10.0,
        shape: shape, // 在Outline 里只能设置圆角,边框用borderSide
        // OutlineButton 的点击事件
        onPressed: () {
          // Perform some action
          if (_onPressed is VoidCallback) {
            _onPressed();
          }
        });
  }
}

Color _randomColor() {
  var red = Random.secure().nextInt(255);
  var greed = Random.secure().nextInt(255);
  var blue = Random.secure().nextInt(255);
  return Color.fromARGB(255, red, greed, blue);
}