Flutter开发六、MaterialButton风格按钮以及按钮⾃适应
⽬录
MaterialButton
import 'package:flutter/material.dart';
MaterialButton buildMaterialButton() {
return MaterialButton(
///按钮的背景
color: Colors.blue,
child: Text("按钮"),
///点击回调函数
onPressed: (){
print("按钮点击");
},
///按钮按下时回调 value = true
///按钮抬起时回调 value = false
///要先于 onPressed
onHighlightChanged: (value){
print("按钮点击 Hight $value");
},
///定义按钮的基⾊，以及按钮的最⼩尺⼨
///ButtonTextTheme.accent 按钮显⽰的⽂本 ThemeData.accentColor(MaterialApp组件中的theme属性配制的)
/
//ButtonTextTheme. normal 按钮显⽰的⽂本⿊⾊或者⽩⾊具体取决于ThemeData.brightness Brightness.dark
///ButtonTextTheme.primary 按钮的显⽰的⽂本 ThemeData.primaryColr
textTheme: ButtonTextTheme.primary,
///配制按钮上⽂本的颜⾊
textColor: Colors.deepOrange,
///未设置点击时的背景颜⾊
llow ,
///按钮点击下的颜⾊
highlightColor:Colors.deepPurple,
///⽔波⽅的颜⾊
splashColor: ,
///按钮的阴影
elevation: 10,
///按钮按下时的阴影⾼度
highlightElevation: 20,
///未设置点击时的阴影⾼度
disabledElevation: 5.0,
///⽤来设置按钮的边框的样式
/// Border.all(color: Colors.deepOrange,width: 2.5,style: BorderStyle.solid) 四个边框
/// Border(bottom: BorderSide(color: Colors.deepOrange,width: 2.5,style: BorderStyle.solid)) 可以分别设置边框
/// ⽤来设置底部边框的
/
// UnderlineInputBorder(borderSide: BorderSide(color: Colors.deepOrange,width: 2.5,style: BorderStyle.solid),borderRadius: BorderRadius.circular(10)) /// ⽤来设置圆⾓矩形边框
/// RoundedRectangleBorder(side: ,borderRadius: BorderRadius.all(Radius.circular(20)))
/// ⽤来设置圆形边框
/// CircleBorder(side: BorderSide(width: 2,d )),
/// 椭圆形边框 StadiumBorder(side: BorderSide(width: 2,color: d))
/// 设置多边形 BeveledRectangleBorder(side: BorderSide(width: 2,color: d),borderRadius: BorderRadius.all(Radius.circular(20)))
///
shape: Border.all(color: Colors.deepOrange,width: 2.5,style: BorderStyle.solid),
height: 44.0,
minWidth: 140,
);
}
MaterialButton属性
其他⼏种Button 跟MaterialButton中的属性⽤法基本⼀致
属性 值类型 说明
onPressed VoidCallback ，⼀般接收⼀个⽅法 必填参数，按下按钮时触发的回调，接收⼀个⽅
法，传null表⽰按钮禁⽤，会显⽰禁⽤相关样式
child Widget ⽂本控件
textColor Color ⽂本颜⾊
color Color 按钮的颜⾊
disabledColor Color 按钮禁⽤时的颜⾊
disabledTextColor Color 按钮禁⽤时的⽂本颜⾊
splashColor Color 点击按钮时⽔波纹的颜⾊
highlightColor Color 点击（长按）按钮后按钮的颜⾊
elevation double 阴影的范围，值越⼤阴影范围越⼤
padding EdgeInsetsGeometry （抽象类） 内边距
padding: EdgeInsets.all(20)
padding: EdgeInsets.fromLTRB(0,30,20,40) // 左上右下
padding: ly(top: 30) // 单独设置左上右下的间距
shape ShapeBorder（抽象类） 设置按钮的形状
BeveledRectangleBorder 带斜⾓的长⽅形边框
shape: BeveledRectangleBorder( // 带斜⾓的长⽅形边框
side: BorderSide(
color: Colors.white,
),
borderRadius: BorderRadius.all(Radius.circular(10))
),
CircleBorder 圆形边框
shape: CircleBorder( // 圆形边框
side: BorderSide(
color: Colors.white,
),
),
RoundedRectangleBorder 圆⾓矩形
shape: RoundedRectangleBorder( // 圆⾓矩形
borderRadius: BorderRadius.all(Radius.circular(10)),
),
StadiumBorder 两端是半圆的边框
shape: StadiumBorder(),
以上常⽤的两个属性
side ⽤来设置边线（颜⾊，宽度等）
const BorderSide({
this.width = 1.0,
this.style = BorderStyle.solid,
})
borderRadius ⽤来设置圆⾓
all 配置所有⽅向
cricular 环形配置，跟all效果差不多，直接接收double类型的值
horizontal 只配置左右⽅向
only 可选左上，右上，左下，右下配置
vertical 只配置上下⽅向
minWidth double 最⼩宽度
height double ⾼度
RaisedButton 凸起的按钮
凸起的按钮，其实就是Android中的Material Design风格的Button ，继承⾃MaterialButton
MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text("测试"),
),
body: Center(
child: RaisedButton(
color: Colors.blue,
textColor: Colors.white,
child: Text('按钮'),
onPressed: () {},
))),
);
FlatButton扁平化按钮
扁平化的按钮，继承⾃MaterialButton
}
@override
Widget build(BuildContext context) {
return FlatButton(
onPressed: _log,
child: Text("扁平按钮"),
color: Colors.blue,
textColor: Colors.black,
shape: RoundedRectangleBorder(
side: BorderSide(
color: Colors.white,
width: 1,
)
,
borderRadius: BorderRadius.circular(8)),
);
}
}
OutlineButton 带边框按钮
带边框的按钮，继承⾃MaterialButton，有默认边线且背景透明
/*带边线的按钮*/
class outlineBtn extends StatelessWidget {
_log() {
print("点击了边线按钮");
}
@override
Widget build(BuildContext context) {
// TODO: implement build
return OutlineButton(
onPressed: _log,
child: Text("边线按钮"),
textColor: d,
splashColor: ,
highlightColor: Colors.black,
shape: BeveledRectangleBorder(
side: BorderSide(
color: d,
width: 1,
),
borderRadius: BorderRadius.circular(10),
),
);
}
}
IconButton
图标按钮，继承⾃StatelessWidget
}
@override
Widget build(BuildContext context) {
return IconButton(
icon: Icon(Icons.home),
onPressed: _log,
color: Colors.blueAccent,
highlightColor: d,
);
}
}
FloatingActionButton
在侧⾯浮起来的那种按钮
child ：⼦视图，⼀般为 Icon，不推荐使⽤⽂字
tooltip FAB： 被长按时显⽰，也是⽆障碍功能
backgroundColor： 背景颜⾊
elevation ：未点击的时候的阴影
hignlightElevation ：点击时阴影值，默认 12.0
onPressed ：点击事件回调
shape ：可以定义 FAB 的形状等
mini： 是否是 mini 类型默认 false
import 'package:flutter/material.dart';
FloatingActionButton buildFloatingActionButton() {
return FloatingActionButton(
child: Icon(Icons.add),
onPressed: () {
print('FloatingActionButton');
},
backgroundColor: llow,
);
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
floatingActionButton : buildFloatingActionButton(),
floatingActionButtonLocation: Docked, body: Center(),
);
}
textstyleDropdownButton下拉选择框
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论