一、Flutter 中的按钮组件介绍
  Flutter 里有很多的 Button 组件很多,常见的按钮组件有:RaisedButton、FlatButton、
  IconButton、OutlineButton、ButtonBar、FloatingActionButton 等。
  RaisedButton :凸起的按钮,其实就是 Material Design 风格的 Button
  FlatButton :扁平化的按钮
  OutlineButton:线框按钮
  IconButton :图标按钮
  ButtonBar:按钮组
  FloatingActionButton:浮动按钮
 
二、Flutter 按钮组件中的一些属性
onPressed  VoidCallback,一般接收一个方法必填参数,按下按钮时触发的回调,接收一个方法,传 null 表示按钮禁用,会显示禁用相关样式
child  Widget
textColor  Color 文本颜色
color Color 按钮的颜色
disabledColor  Color  按钮禁用时的颜色
disabledTextColor  Color  按钮禁用时的文本颜色
splashColor  Color  点击按钮时水波纹的颜色
highlightColor  Color  点击(长按)按钮后按钮的颜色
elevation  double  阴影的范围,值越大阴影范围越大
padding  内边距
shape  设置按钮的形状
   shape: RoundedRectangleBorder(
      borderRadius:
      BorderRadius.circular(10),
   )
  shape: CircleBorder(
     side: BorderSide(
        color: Colors.white,
    )
  ) 
 
 
案例代码

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>[
 MaterialButton(
height: Screen.width(height: 85),
color: ColorGather.colorMain(),
textColor: Colors.white,
elevation: 2.0,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.all(Radius.circular(Screen.width(8)))
),
child: Text('确认', style: TextStyle(fontSize: Screen.width(28)),),
onPressed:() {},
),
            Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
RaisedButton(
child: Text('普通按钮'),
onPressed: () {
print("普通按钮");
},
),
SizedBox(width: 5),
RaisedButton(
child: Text('颜色按钮'),
color: Colors.blue,
textColor: Colors.white,
onPressed: () {
print("有颜色按钮");
},
),
SizedBox(width: 5),
RaisedButton(
child: Text('阴影按钮'),
color: Colors.blue,
textColor: Colors.white,
elevation: 20,
onPressed: () {
print("有阴影按钮");
},
),
SizedBox(width: 5),
RaisedButton.icon(
icon: Icon(Icons.search),
label: Text('图标按钮'),
color: Colors.blue,
textColor: Colors.white,
// onPressed: null,
onPressed: () {
print("图标按钮");
})
],
),
SizedBox(height: 10),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Container(
height: 50,
width: 400,
child: RaisedButton(
child: Text('宽度高度'),
color: Colors.blue,
textColor: Colors.white,
elevation: 20,
onPressed: () {
print("宽度高度");
},
),
)
],
),
SizedBox(height: 10),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Expanded(
child: Container(
height: 60,
margin: EdgeInsets.all(10),
child: RaisedButton(
child: Text('自适应按钮'),
color: Colors.blue,
textColor: Colors.white,
elevation: 20,
onPressed: () {
print("自适应按钮");
},
),
),
)
],
),
SizedBox(height: 10),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
RaisedButton(
child: Text('圆角按钮'),
color: Colors.blue,
textColor: Colors.white,
elevation: 20,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10)),
onPressed: () {
print("圆角按钮");
}),
Container(
height: 80,
child: RaisedButton(
child: Text('圆形按钮'),
color: Colors.blue,
textColor: Colors.white,
elevation: 20,
splashColor: Colors.red,
shape:
CircleBorder(side: BorderSide(color: Colors.white)),
onPressed: () {
print("圆形按钮");
}),
),
FlatButton(
child: Text("按钮"),
color: Colors.blue,
textColor: Colors.yellow,
onPressed: () {
print('FlatButton');
},
),
SizedBox(width: 10),
OutlineButton(
child: Text("按钮"),
// color: Colors.red, //没有效果
// textColor: Colors.yellow,
onPressed: () {
print('FlatButton');
})
],
),
SizedBox(height: 10),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Expanded(
child: Container(
margin: EdgeInsets.all(20),
height: 50,
child: OutlineButton(child: Text("注册"), onPressed: () {}),
),
)
],
),
Row(
mainAxisAlignment: MainAxisAlignment.end,
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("宽度高度");
},
),
MyButton(text: "自定义按钮",height: 60.0,width: 100.0,pressed: (){
print('自定义按钮');
}) ],
)
],
)
],
));
}
} //自定义按钮组件 class MyButton extends StatelessWidget {
final text;
final pressed;
final width;
final 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 中的常见的按钮组件 以及自 定义按钮组件的更多相关文章

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

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

  2. 第六章 组件 55 组件-使用components定义私有组件

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...

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

    /* Flutter中的常见的按钮组件 以及自定义按钮组件 一.Flutter中的按钮组件介绍 Flutter里有很多的Button组件,常见的按钮组件有:RaisedButton/FlatButto ...

  4. Flutter中的按钮组件介绍

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

  5. flutter中的按钮组件

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

  6. Flutter学习笔记(11)--文本组件、图标及按钮组件

    如需转载,请注明出处:Flutter学习笔记(10)--容器组件.图片组件 文本组件 文本组件(text)负责显示文本和定义显示样式,下表为text常见属性 Text组件属性及描述 属性名 类型 默认 ...

  7. Flutter中Expanded组件用法

    Flutter中Expanded组件用法 Expanded组件可以使Row.Column.Flex等子组件在其主轴方向上展开并填充可用空间(例如,Row在水平方向,Column在垂直方向).如果多个子 ...

  8. 在Flutter中嵌入Native组件的正确姿势是...

    引言 在漫长的从Native向Flutter过渡的混合工程时期,要想平滑地过渡,在Flutter中使用Native中较为完善的控件会是一个很好的选择.本文希望向大家介绍AndroidView的使用方式 ...

  9. Flutter中的普通路由与命名路由(Navigator组件)

    Flutter 中的路由通俗的讲就是页面跳转.在 Flutter 中通过 Navigator 组件管理路由导航.并提供了管理堆栈的方法.如:Navigator.push 和 Navigator.pop ...

随机推荐

  1. 小程序 与 App 与 H5 之间的区别

    小程序的实现原理 根据微信官方的说明,微信小程序的运行环境有 3 个平台,iOS 的 WebKit(苹果开源的浏览器内核),Android 的 X5 (QQ 浏览器内核),开发时用的 nw.js(C+ ...

  2. BK: How to read a book 第四篇

    第四篇 阅读的最终目标 第二十章 阅读的第四个层次:主题阅读 在做主题阅读时的要求: 1. 知道:知道应该读哪些书. 在面对如此庞大的相关资料时,我们要如何决定我们要研究的主题是什么呢. 如何判断属于 ...

  3. PyQt5-QDateEdit的简单使用

    使用PyQt5开发图形界面,里面使用日期框,这里把这个QDateEdit组件命名为:beginDate from PyQt5.QtCore import QDate 1.初始化赋值,不设置则默认为20 ...

  4. Sublime Text(代码编辑软件)

    特点 Sublime Text 3是一个轻量.简洁.高效.跨平台的编辑器,方便的配色以及兼容vim快捷键等各种优点: 它体积小巧,无需安装,绿色便携:它可跨平台支持Windows/Mac/Linux: ...

  5. 零基础自学Python是看书还是看视频?

    很多人都碍于Python培训班的高昂费用和有限的空余时间都选择自学Python,但是没有老师帮助,显得有些迷茫,不知应该从何处学起,也不知识看书学习还是应该看视频学习.本就来谈谈这个话题.   我们先 ...

  6. vue 项目初始化

    初始化 vue init webpack-simple myproject 安裝 npm install 运行 npm run dev 访问地址 http://localhost:8080/ 安装we ...

  7. 动态规划 ---- 最长公共子序列(Longest Common Subsequence, LCS)

    分析: 完整代码: // 最长公共子序列 #include <stdio.h> #include <algorithm> using namespace std; ; char ...

  8. 服务器上搭建使用SSH账户登录的Git仓库

    1.安装git yum install -y git 2.创建git仓库保存的目录 mkdir /data/git_repo 3.初始化空仓库 cd /data/git_repogit init -- ...

  9. sql 应用记录

    SELECT * FROM (select aa.*,bb.mentalvisitid, ' then '家庭访视' else '电话' end as BCSFXS ,bb.visitdate, ' ...

  10. hadoop中遇到的各种错误记录

    hadoop中namenode无法启动          转载链接:https://blog.csdn.net/love666666shen/article/details/74350358 使用pi ...