文章目录
前言
一、Button是什么？
按键，在flutter 中，有很多已经内置的button，合理的利用可以快速的开发，
但是ElevatedButton中，有一个Buttonstyle，配合起来可以创建自己需要的按钮样式，但是其实个人感觉运用起来有些复杂。
二、开始使用button
在一个app 中，肯定会出现按键widget的，这个也是运用很多的情况。
1.ElevatedButton
| 参数 | 说明 |
|---|---|
| super.key | key |
| required super.onPressed | 点击函数 |
| super.onLongPress | 长按的处理 |
| super.onHover | 鼠标悬停的时候处理的时间 |
| super.onFocusChange | 焦点改变 |
| super.style | buttonstyle |
| super.focusNode | – |
| super.autofocus = false, | – |
| super.clipBehavior = Clip.none | 抗锯齿功能 |
| super.statesController | 可以监听和控制按钮的状态改变，然后做处理 |
| required super.child | widget |
1.无style 的ElevatedButton
代码如下（示例）：
ElevatedButton(
onPressed: () {},
child: const Text('ElevatedButton'),
2.基础功能的处理之后的button
鼠标悬停在按钮上面就改变颜色
ElevatedButton(
onPressed: () {
debugPrint("I AM CLICK HERE");
},
onLongPress: () {
debugPrint('I AM LONGPRESS');
},
//按钮的状态控制器，少用到
// statesController: ,
//抗锯齿功能
clipBehavior: Clip.antiAlias,
//焦点处理，使用不多
focusNode: FocusNode(),
//鼠标悬停的处理，一般在win 和mac的软件的时候处理
onHover: (inhover) {
if (inhover) {
_color = Colors.green;
} else {
_color = Colors.red;
}
setState(() {});
},
child: Text(
'ElevatedButton',
style: TextStyle(color: _color),
),
)
3.利用buttonstyle 来美化下button
| 参数 | 说明 |
|---|---|
| this.textStyle | 文本样式 |
| this.backgroundColor | 背景颜色 |
| this.foregroundColor | |
| this.overlayColor | |
| this.shadowColor | |
| this.surfaceTintColor | |
| this.elevation | |
| this.padding | |
| this.minimumSize | |
| this.fixedSize | |
| this.maximumSize | |
| this.side | |
| this.shape | |
| this.mouseCursor | |
| this.visualDensity | |
| this.tapTargetSize | |
| this.animationDuration | |
| this.enableFeedback | |
| this.alignment | |
| this.splashFactory |
【Flutter】shape 属性 ShapeBorder，形状
ElevatedButton(
onPressed: () {
debugPrint("I AM CLICK HERE");
},
onLongPress: () {
debugPrint('I AM LONGPRESS');
},
//按钮的状态控制器，少用到
// statesController: ,
//抗锯齿功能
clipBehavior: Clip.antiAlias,
//焦点处理，使用不多
focusNode: FocusNode(),
style: ButtonStyle(
//背景颜色
backgroundColor: MaterialStateProperty.all(Colors.indigo),
//字体颜色
foregroundColor: MaterialStateProperty.all(Colors.white),
// 鼠标悬停的时候背景颜色
overlayColor: MaterialStateProperty.all(Colors.red),
//影音的颜色
shadowColor: MaterialStateProperty.all(Colors.yellow),
//表面颜色
surfaceTintColor: MaterialStateProperty.all(Colors.pink),
// 阴影值
elevation: MaterialStateProperty.all(10),
//内边距，文本同按钮边框的距离
// padding: MaterialStateProperty.all(const EdgeInsets.all(5)),
//最小值，尺寸不能再小于这个了
// minimumSize: MaterialStateProperty.all(const Size(10, 10)),
//边框的颜色和厚度
side: MaterialStateProperty.all(
const BorderSide(color: Colors.pink, width: 1.0)),
//形状
shape: MaterialStateProperty.all(
const BeveledRectangleBorder(
borderRadius: BorderRadius.all(Radius.circular(15)),
side: BorderSide(color: Colors.green, width: 1)),
),
//鼠标的样式，当悬停的时候，鼠标要显示为什么样的样式，比如下面的鼠标就会显示为等待加载的样式
mouseCursor:
MaterialStateProperty.all(SystemMouseCursors.wait),
//视觉密度，就是按钮的紧凑性
visualDensity: VisualDensity.compact,
//触控区域,少用
tapTargetSize: MaterialTapTargetSize.padded,
//shap,eleation 改变的动画时间
animationDuration: const Duration(seconds: 1),
//检测到的手势是否应提供声学和/或触觉反馈。例如，在Android上，当启用反馈时，轻敲会产生咔哒声，长按会产生短暂的振动。
enableFeedback: true,
//child的位置，
alignment: Alignment.center,
//水波纹
splashFactory: InkRipple.splashFactory,
//字体样式
textStyle: MaterialStateProperty.all(
const TextStyle(fontWeight: FontWeight.bold))),
child: const Text(
'ElevatedButton',
),
)
2.IconButton，TextButton基础功能都是一样的
带图标的按键：buttonstyle 同上面的说明是一样的；
isSelected: isSelect,//需要在themedata 里面设置useMaterial3: true
IconButton(
icon: const Icon(Icons.arrow_drop_down),
isSelected: isSelect,//需要在themedata 里面设置useMaterial3: true
selectedIcon: const Icon(Icons.arrow_drop_up),
onPressed: () {
isSelect = !isSelect;
setState(() {});
},
),
IconButton(
onPressed: () {
print("Pressed");
setState(() {});
},
// splashRadius: 0.2,
splashColor: Colors.red,
focusColor: Colors.indigo,
hoverColor: Colors.yellow,
highlightColor: Colors.purple,
disabledColor: Colors.teal,
// mouseCursor: SystemMouseCursors.allScroll,
//尺寸限制
// constraints:BoxConstraints() ,
tooltip: 'this is a iconbutton',
isSelected: true,
selectedIcon: Icon(Icons.favorite),
icon: Icon(Icons.adb_sharp))
三、做几个好看点的按键
ElevatedButton(
onPressed: () {},
style: ButtonStyle(
backgroundColor: MaterialStateProperty.all(Colors.teal),
shadowColor: MaterialStateProperty.all(Colors.yellowAccent),
elevation: MaterialStateProperty.all(10)),
child: const Text(
'开始',
style: TextStyle(color: Colors.white),
)),
ElevatedButton(
onPressed: () {},
clipBehavior: Clip.antiAlias,
style: ButtonStyle(
shape: MaterialStateProperty.all(const CircleBorder(
side: BorderSide(width: 1, color: Colors.pink))),
padding:
MaterialStateProperty.all(const EdgeInsets.all(10)),
overlayColor: MaterialStateProperty.all(Colors.white),
foregroundColor: MaterialStateProperty.all(Colors.black),
backgroundColor:
MaterialStateProperty.all(Colors.indigoAccent),
shadowColor: MaterialStateProperty.all(Colors.blueAccent),
elevation: MaterialStateProperty.all(10)),
child: const Text(
'登陆',
)),
ElevatedButton(
onPressed: () {},
style: ButtonStyle(
minimumSize: MaterialStateProperty.all(
Size(MediaQuery.of(context).size.width, 40)),
foregroundColor: MaterialStateProperty.all(Colors.black),
backgroundColor: MaterialStateProperty.all(Colors.purple),
shadowColor: MaterialStateProperty.all(Colors.blueAccent),
elevation: MaterialStateProperty.all(10)),
child: const Text(
'登陆',
)),
ElevatedButton(
onPressed: () {},
style: ButtonStyle(
shape: MaterialStateProperty.all(
const BeveledRectangleBorder(
borderRadius: BorderRadius.all(Radius.circular(15)),
side: BorderSide(color: Colors.green, width: 1))),
minimumSize: MaterialStateProperty.all(
Size(MediaQuery.of(context).size.width, 40)),
foregroundColor: MaterialStateProperty.all(Colors.black),
backgroundColor: MaterialStateProperty.all(Colors.pink),
shadowColor: MaterialStateProperty.all(Colors.blueAccent),
elevation: MaterialStateProperty.all(10)),
child: const Text(
'登陆',
)),
总结
欢迎关注，留言，咨询，交流！
1858
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
