Flutter中的按钮组件Button
Flutter提供了丰富的按钮组件可以让我们快速的构建UI界面。
常见的按钮组件如下：
1. RaisedButton 凸起的按钮；
2. FlatButton 扁平化的按钮；
3. OutlineButton 线框按钮；
4. IconButton 图标按钮；
5. ButtonBar 按钮组；
6. FloatingActionButton 浮动按钮；
按钮组件常见的属性：
1. onPressed 按下按钮时触发的回调方法，为必填参数，如果值为 null 表示禁用按钮，会显示禁用相关样式；
2. child 子组件；
3. textColor 文本颜色；
4. color 按钮的颜色；
5. disabledColor 按钮禁用时的颜色；
6. disabledTextColor 按钮禁用时的文本颜色；
7. splashColor 点击按钮时水波纹的颜色；
8. highlightColor 长按按钮后按钮的颜色；
9. elevation 阴影的范围；
10. padding 内边距；
11. shape 按钮的形状。常用以下两种：
(1). RoundedRectangleBorder() 圆角形；
(2). CircleBorder() 全圆形；
代码示例：
import 'package:flutter/material.dart';
class ButtonPage extends StatelessWidget {
const ButtonPage({Key key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('按钮页面'),
actions:<Widget>[
IconButton(
icon:Icon(Icons.search),
onPressed: (){
print("图标按钮");
},
)
]
),
// 浮动按钮
floatingActionButton: FloatingActionButton(
child:Icon(Icons.add,color:Colors.blue,size:40,),
// 点击事件
onPressed: (){
print('浮动按钮');
},
// 背景颜色
backgroundColor: Colors.yellow,
),
// 浮动按钮的位置
floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat,
body:Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
RaisedButton(
child:Text('普通按钮'),
// 背景颜色
color:Colors.blue,
// 文字颜色
textColor: Colors.white,
// 按钮阴影
elevation: 10,
onPressed: (){
print('普通按钮');
},
),
],
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
RaisedButton.icon(
icon: Icon(Icons.search),
label: Text('图标按钮'),
onPressed: (){
print('图标按钮');
},
)
],
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
// 通过加外层容器设定尺寸来控制按钮的大小
Container(
width: 140,
height:50,
child: RaisedButton(
child:Text('设置宽高'),
// 背景颜色
color:Colors.blue,
// 文字颜色
textColor: Colors.white,
// 按钮阴影
elevation: 10,
onPressed: (){
print('设置宽高');
},
),
)
],
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
// 让按钮宽度自适应
Expanded(
// 通过加外层容器设定尺寸来控制按钮的大小
child:Container(
height:80,
margin: EdgeInsets.all(10),
child: RaisedButton(
child:Text('自适应按钮'),
// 背景颜色
color:Colors.blue,
// 文字颜色
textColor: Colors.white,
// 按钮阴影
elevation: 10,
onPressed: (){
print('自适应按钮');
},
),
)
)
],
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
RaisedButton(
child:Text('圆角按钮'),
// 背景颜色
color:Colors.blue,
// 文字颜色
textColor: Colors.white,
// 按钮阴影
elevation: 10,
// 圆角
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10)
),
onPressed: (){
print('圆角按钮');
},
),
],
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Container(
height: 80,
child: RaisedButton(
child:Text('圆形按钮'),
// 背景颜色
color:Colors.blue,
// 文字颜色
textColor: Colors.white,
// 按钮阴影
elevation: 10,
// 圆角
shape: CircleBorder(
side: BorderSide(color: Colors.black),
),
// 水波纹
splashColor:Colors.red,
onPressed: (){
print('圆形按钮');
},
),
)
],
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
FlatButton(
child: Text('扁平按钮'),
color:Colors.blue,
textColor: Colors.yellow,
onPressed:(){
print('扁平按钮');
},
)
],
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
OutlineButton(
child: Text('边框按钮'),
textColor: Colors.yellow,
onPressed:(){
print('边框按钮');
},
)
],
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
ButtonBar(
children:<Widget>[
RaisedButton(
child:Text('按钮组'),
color:Colors.blue,
textColor: Colors.white,
elevation: 20,
onPressed: (){
print('按钮组');
}
),
RaisedButton(
child:Text('按钮组'),
color:Colors.blue,
textColor: Colors.white,
elevation: 20,
onPressed: (){
print('按钮组');
}
),
RaisedButton(
child:Text('按钮组'),
color:Colors.blue,
textColor: Colors.white,
elevation: 20,
onPressed: (){
print('按钮组');
}
)
]
)
],
),
MyButton(text:'自定义按钮',width:60.0,height:40.0,pressed:(){
print('自定义按钮');
})
],
)
);
}
}
// 自定义按钮
class MyButton extends StatelessWidget {
final text;
final pressed;
final width;
final height;
const MyButton({this.text='',this.width=80.0,this.height=30.0,this.pressed=0});
@override
Widget build(BuildContext context){
return Container(
width:this.width,
height:this.height,
child: RaisedButton(
child: Text(this.text),
onPressed:this.pressed
)
);
}
}效果图如下：
用浮动按钮实现类似闲鱼APP的底部导航条效果，以下是代码示例：
import "package:flutter/material.dart";
// 标签切换页
class Tabs extends StatefulWidget {
final index;
Tabs({Key key,this.index=1}) : super(key: key);
_TabsState createState() => _TabsState(this.index);
}
class _TabsState extends State<Tabs>{
// 当前选中标签的下标
int _currentIndex;
// 当前页面数组
List _pageList = [
Center(child:Text("这是首页页面")),
Center(child:Text("这是分类页面")),
Center(child:Text("这是设置页面")),
];
_TabsState(index){
this._currentIndex = index;
}
@override
Widget build(BuildContext context) {
return Container(
child: Scaffold(
// 为了调整浮动按钮的大小，外层添加容器
floatingActionButton:Container(
height: 70,
width: 70,
padding: EdgeInsets.all(6),
margin:EdgeInsets.only(top:8),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(35),
color:Colors.white,
),
child:FloatingActionButton(
child:Icon(Icons.add),
onPressed:(){
// 改变状态
setState(() {
this._currentIndex=1;
});
},
backgroundColor: this._currentIndex==1?Colors.red:Colors.white
),
),
floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
// 主体
body:this._pageList[this._currentIndex],
// 底部导航条
bottomNavigationBar: BottomNavigationBar(
// 当前菜单下标
currentIndex: this._currentIndex,
// 点击事件,获取当前点击的标签下标
onTap: (int index){
// 改变状态
setState(() {
this._currentIndex=index;
});
},
// 图标大小
iconSize: 30.0,
// 选中图标的颜色
fixedColor: Colors.red,
// 多个标签页的动画效果
type: BottomNavigationBarType.fixed,
items: [
// 只能是BottomNavigationBarItem的类型
BottomNavigationBarItem(
icon:Icon(Icons.home),
label:"首页"
),
BottomNavigationBarItem(
icon:Icon(Icons.category),
label:"分类"
),
BottomNavigationBarItem(
icon:Icon(Icons.settings),
label:"设置"
)
]
),
));
}
}效果图如下：
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2020-12-28，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
相关产品与服务
容器服务
腾讯云容器服务（Tencent Kubernetes Engine, TKE）基于原生 kubernetes 提供以容器为核心的、高度可扩展的高性能容器管理服务，覆盖 Serverless、边缘计算、分布式云等多种业务部署场景，业内首创单个集群兼容多种计算节点的容器资源管理模式。同时产品作为云原生 Finops 领先布道者，主导开源项目Crane，全面助力客户实现资源优化、成本控制。
腾讯云开发者
