/*
Flutter中的常见的按钮组件 以及自定义按钮组件
一、Flutter中的按钮组件介绍
Flutter里有很多的Button组件,常见的按钮组件有:RaisedButton/FlatButton/IconButton/
OutlineButton/ButtonBar/FloatingActionButton等。
RaisedButton:凸起的按钮,其实就是Material Design风格的Button
FlatButton:扁平化的按钮
OutlineButton:线框按钮
IconButton:图标按钮
ButtonBar: 按钮组
FloatingActionButton:浮动按钮 二、Flutter按钮组件中的一些属性:
onPressed:必填参数,按下按钮时触发的回调,接受一个方法,传null表示按钮禁用,会显示禁用相关样式
child:文本控件
textColor:文本颜色
color:按钮的颜色
disabledColor:按钮禁用时的颜色
disabledTextColor:按钮禁用时的文本颜色
splashColor:点击按钮时水波纹的颜色
elevation:阴影的范围
padding:内边距
shape:设置按钮的形状
*/

Button.dart

import 'package:flutter/material.dart';

class ButtonDemoPage extends StatelessWidget {
const ButtonDemoPage({Key key}) : super(key: key); @override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('按钮演示页面'),
actions: <Widget>[
IconButton(
icon: Icon(Icons.settings),
onPressed: () {},
)
],
),
body: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Row(
children: <Widget>[
RaisedButton(
child: Text('普通'),
onPressed: () {
print('普通按钮');
},
),
SizedBox(width: ),
RaisedButton.icon(
icon: Icon(Icons.search),
label: Text('图标'),
onPressed: null,
),
SizedBox(width: ),
RaisedButton(
child: Text('有颜色'),
color: Colors.blue,
textColor: Colors.white,
onPressed: () {
print('有颜色按钮');
},
),
SizedBox(width: ),
RaisedButton(
child: Text('有阴影'),
color: Colors.blue,
textColor: Colors.white,
elevation: ,
onPressed: () {
print('有阴影按钮');
}),
],
),
SizedBox(height: ),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Container(
height: ,
width: ,
child: RaisedButton(
child: Text('宽度高度'),
color: Colors.blue,
textColor: Colors.white,
elevation: ,
onPressed: () {},
),
)
],
),
SizedBox(height: ),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Expanded(
child: Container(
height: ,
margin: EdgeInsets.all(),
child: RaisedButton(
child: Text('自适应按钮'),
color: Colors.blue,
textColor: Colors.white,
elevation: ,
onPressed: () {
print('自适应按钮');
},
),
))
],
),
SizedBox(height: ),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
RaisedButton(
child: Text('圆角按钮'),
color: Colors.blue,
textColor: Colors.white,
elevation: ,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular()),
onPressed: () {
print('圆角按钮');
},
),
RaisedButton(
child: Text('圆形按钮'),
color: Colors.blue,
textColor: Colors.white,
elevation: ,
splashColor: Colors.grey,
shape: CircleBorder(side: BorderSide(color: Colors.white)),
onPressed: () {
print('圆形按钮');
},
)
],
),
FlatButton(
//扁平化按钮:
child: Text('扁平化的按钮'),
color: Colors.blue,
textColor: Colors.yellow,
onPressed: () {},
),
OutlineButton(
child: Text('线框按钮'),
onPressed: () {
print('OutlineButton');
},
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Expanded(
child: Container(
margin: EdgeInsets.all(),
height: ,
child: OutlineButton(
child: Text('注册'),
onPressed: () {},
),
),
)
],
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
ButtonBar(
//按钮组
children: <Widget>[
RaisedButton(
child: Text('登录'),
color: Colors.blue,
textColor: Colors.white,
onPressed: () {},
),
RaisedButton(
child: Text('注册'),
color: Colors.blue,
textColor: Colors.white,
onPressed: () {},
),
],
)
],
),
MyButton(
text: "自定义按钮",
height: 60.0,
width: 100.0,
pressed: () {
print("自定义按钮");
},
)
],
));
}
} //自定义按钮组件:
class MyButton extends StatelessWidget {
final text;
final pressed;
final double width;
final double height;
const MyButton(
{this.text = '', this.pressed = null, this.width = , this.height = });
@override
Widget build(BuildContext context) {
return Container(
height: this.height,
width: this.width,
child: RaisedButton(
child: Text(this.text),
onPressed: this.pressed,
),
);
}
}

22Flutter中的常见的按钮组件 以及自定义按钮组件的更多相关文章

  1. echarts 显示下载按钮,echarts 自定义按钮,echarts 添加按钮

    echarts 显示下载按钮,echarts 自定义按钮,echarts 添加按钮 >>>>>>>>>>>>>>&g ...

  2. #003 React 组件 继承 自定义的组件

    主题:React组件 继承 自定义的 组件 一.需求说明 情况说明: 有A,B,C,D 四个组件,里面都有一些公用的逻辑,比如 设置数据,获取数据,有某些公用的的属性,不想在 每一个 组件里面写这些属 ...

  3. Flutter 中的常见的按钮组件 以及自定义按钮组件

    Flutter 里有很多的 Button 组件很多,常见的按钮组件有:RaisedButton.FlatButton. IconButton.OutlineButton.ButtonBar.Float ...

  4. MIP组件开发 自定义js组件开发步骤

    什么是百度MIP? MIP(Mobile Instant Pages - 移动网页加速器)主要用于移动端页面加速 官网参考:https://www.mipengine.org/doc/00-mip-1 ...

  5. 常用样式制作思路 自定义按钮~自适应布局~常见bug seajs简记 初学者必知的HTML规范 不容忽略的——CSS规范

    常用样式制作思路   学习常用样式总结参考来自这里 带点文字链接列表利用:before实现 1 <!DOCTYPE html> 2 <html lang="en" ...

  6. 如何让antd的Modal组件的确认和取消不显示(或自定义按钮)(转载)

    使用Modal中的footer属性,如下: <Modal title="更改成员" visible={visible} confirmLoading={confirmLoad ...

  7. PyQt(Python+Qt)学习随笔:Designer中的QDialogButtonBox增加自定义按钮的方法

    在Qt Designer中可以预先定义标准按钮,相关支持的标准按钮请见<PyQt(Python+Qt)学习随笔:Designer中的QDialogButtonBox的StandardButton ...

  8. 基于React.js网页版弹窗|react pc端自定义对话框组件RLayer

    基于React.js实现PC桌面端自定义弹窗组件RLayer. 前几天有分享一个Vue网页版弹框组件,今天分享一个最新开发的React PC桌面端自定义对话框组件. RLayer 一款基于react. ...

  9. iOS开发——UI进阶篇(十八)核心动画小例子,转盘(裁剪图片、自定义按钮、旋转)图片折叠、音量震动条、倒影、粒子效果

    一.转盘(裁剪图片.自定义按钮.旋转) 1.裁剪图片 将一张大图片裁剪为多张 // CGImageCreateWithImageInRect:用来裁剪图片 // image:需要裁剪的图片 // re ...

随机推荐

  1. 使用springboot和easypoi进行的数据导出的小案例

    在这个案例中使用的有springboot和easypoi进行数据导出到excel中 yml文件是这样的: server: port: 8080 spring: datasource: url: jdb ...

  2. .NET Core 初体验

    .NET Core 作为微软的开源项目,neter 们对之的期待还是挺大的. 以前也看过,接触过,摸索建了几个示例项目,今天就罗列下自己的初体验. .NET Core 安装.帮助等 安装的话,直接官网 ...

  3. 混合应用 微信登录授权 微信登录认证失败 ios PGWXAPI错误-1 code:-100 / 安卓 message:invalid appsecret innerCode:40125

    最近项目需要做微信登录,于是利用HTML5+ API Reference的OAuth模块管理客户端的用户登录授权验证功能,允许应用访问第三方平台的资源.(链接:https://www.dcloud.i ...

  4. MLP多层感知机

    @author:wepon @blog:http://blog.csdn.net/u012162613/article/details/43221829 转载:http://blog.csdn.net ...

  5. NOSQL数据库简介

    什么是NoSQL?泛指非关系型的数据库不支持SQL语法存储结构跟传统关系型数据库中的那种关系表完全不同,nosql中存储的数据都是Key-Value(即键值对关系)形式NoSQL的世界中没有一种通用的 ...

  6. fs模块

    fs.readdir(path, callback) 异步读取目录下文件 path - 文件路径. callback - 回调函数,回调函数带有两个参数err, files,err 为错误信息,fil ...

  7. tsql 通过row_number() over() 产生行号

    先按userIP分组,再按时间排序,最后编号. select row_number() over (partition by UserIp order by insertTime),* from us ...

  8. vue 配置 TinyMCE

    1.index.html 增加cdn 地址 <script src="//cdn.bootcss.com/tinymce/5.0.16/tinymce.min.js"> ...

  9. (WAWAWAWAWAWAW) G. Periodic RMQ Problem

    没有联通门 : Codeforces G. Periodic RMQ Problem /* Codeforces G. Periodic RMQ Problem MMP 什么动态开点线段树啊 ... ...

  10. [转]引用模板类中定义的类型(用typedef或using)以及auto、decltype、typename的使用

    一.背景 使用typedef或者using定义类型别名是非常常见的手段,在c++里面,有时为了封装性,模块性等原因还会在某一个namespace或者class内部定义类型别名. 最近在写c++代码的时 ...