mirror of
https://github.com/alibaba/flutter-go.git
synced 2025-05-21 23:06:33 +08:00
123 lines
4.2 KiB
Dart
123 lines
4.2 KiB
Dart
/**
|
||
* Created with Android Studio.
|
||
* User: 一晟
|
||
* Date: 2018/11/22
|
||
* Time: 上午12:03
|
||
* email: zhu.yan@alibaba-inc.com
|
||
* tartget: OutlineButton 的示例
|
||
*/
|
||
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:new 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: new 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);
|
||
}
|