首页 > 其他 > 详细

flutter中的按钮组件

时间:2019-06-19 20:52:56      阅读:408      评论:0      收藏:0      [点我收藏+]
Flutter 里有很多的 Button 组件很多,常见的按钮组件有:RaisedButton、FlatButton、IconButton、OutlineButton、ButtonBar、FloatingActionButton 等。 
  •  aisedButton :凸起的按钮,其实就是 Material Design 风格的 Button
  • FlatButton :扁平化的按钮
  • OutlineButton:线框按钮
  • IconButton :图标按钮
  • ButtonBar:按钮组
  • FloatingActionButton:浮动按钮

常用属性

在flutter中,按钮组件有以下常用属性:

  • onPressed :
    必填参数,按下按钮时触发的回调,接收一个
    方法,传 null 表示按钮禁用,会显示禁用相关
    样式 
  • child :文本控件
  • textColor :文本颜色 
  • color :文本颜色 
  • disabledColor :按钮禁用时的颜色 
  • disabledTextColor :按钮禁用时的文本颜色 
  • splashColor :点击按钮时水波纹的颜色
  • highlightColor :点击(长按)按钮后按钮的颜色
  • elevation :阴影的范围,值越大阴影范围越大
  • padding :内边距
  • shape  :设置按钮的形状

基本使用

class HomeContent extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        Row(
          children: <Widget>[
            RaisedButton(
              child:Text(‘普通按钮‘),
              onPressed: (){
                print("这是一个普通按钮");
              },
            ),
          ],
        ),
      ],
    );
  }
}

技术分享图片

上面使用RaisedButton组件实现了一个最简单的按钮,然后,可以在此基础上添加各种样式:

 技术分享图片 技术分享图片

 设置按钮宽高

 在上面的常用属性中,是没有宽高属性的,因此如果需要人为调整按钮的大小,需要在按钮的外层套一层Container,然后设置这个Container的宽高:

技术分享图片   技术分享图片

自适应按钮

 技术分享图片  技术分享图片

按钮图标

 技术分享图片   技术分享图片

圆角按钮和圆形按钮

 技术分享图片   技术分享图片  技术分享图片

图标按钮

技术分享图片   技术分享图片

 其他按钮

 技术分享图片  技术分享图片

按钮组ButtonBar

 技术分享图片  技术分享图片

 自定义按钮组件

 如果需要多次使用按钮,每次都像上面那样写的话,会十分麻烦,因此,可以在按钮组件的基础上进行简单的封装,实现自己的按钮组件:

 

class MyButton extends StatelessWidget {
  final text;
  final pressed;
  final double width;
  final double height;
  const MyButton({this.text=‘‘,this.pressed=null,this.width=80,this.height=30}) ;

  @override
  Widget build(BuildContext context) {
    return Container(
      height: this.height,
      width: this.width,
      child: RaisedButton(
        child: Text(this.text),
        onPressed:this.pressed ,
      ),
    );
  }
}

技术分享图片   技术分享图片

 

 

 

 

 

 

 

 

flutter中的按钮组件

原文:https://www.cnblogs.com/yuyujuan/p/11042581.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!