Flutter 中的常见的按钮组件 以及自 定义按钮组件
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 中的常见的按钮组件 以及自 定义按钮组件的更多相关文章
- Flutter 中的常见的按钮组件 以及自定义按钮组件
Flutter 里有很多的 Button 组件很多,常见的按钮组件有:RaisedButton.FlatButton. IconButton.OutlineButton.ButtonBar.Float ...
- 第六章 组件 55 组件-使用components定义私有组件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...
- 22Flutter中的常见的按钮组件 以及自定义按钮组件
/* Flutter中的常见的按钮组件 以及自定义按钮组件 一.Flutter中的按钮组件介绍 Flutter里有很多的Button组件,常见的按钮组件有:RaisedButton/FlatButto ...
- Flutter中的按钮组件介绍
Flutter 里有很多的 Button 组件很多,常见的按钮组件有:RaisedButton.FlatButton.IconButton.OutlineButton.ButtonBar.Floati ...
- flutter中的按钮组件
Flutter 里有很多的 Button 组件很多,常见的按钮组件有:RaisedButton.FlatButton.IconButton.OutlineButton.ButtonBar.Floati ...
- Flutter学习笔记(11)--文本组件、图标及按钮组件
如需转载,请注明出处:Flutter学习笔记(10)--容器组件.图片组件 文本组件 文本组件(text)负责显示文本和定义显示样式,下表为text常见属性 Text组件属性及描述 属性名 类型 默认 ...
- Flutter中Expanded组件用法
Flutter中Expanded组件用法 Expanded组件可以使Row.Column.Flex等子组件在其主轴方向上展开并填充可用空间(例如,Row在水平方向,Column在垂直方向).如果多个子 ...
- 在Flutter中嵌入Native组件的正确姿势是...
引言 在漫长的从Native向Flutter过渡的混合工程时期,要想平滑地过渡,在Flutter中使用Native中较为完善的控件会是一个很好的选择.本文希望向大家介绍AndroidView的使用方式 ...
- Flutter中的普通路由与命名路由(Navigator组件)
Flutter 中的路由通俗的讲就是页面跳转.在 Flutter 中通过 Navigator 组件管理路由导航.并提供了管理堆栈的方法.如:Navigator.push 和 Navigator.pop ...
随机推荐
- 小程序 与 App 与 H5 之间的区别
小程序的实现原理 根据微信官方的说明,微信小程序的运行环境有 3 个平台,iOS 的 WebKit(苹果开源的浏览器内核),Android 的 X5 (QQ 浏览器内核),开发时用的 nw.js(C+ ...
- BK: How to read a book 第四篇
第四篇 阅读的最终目标 第二十章 阅读的第四个层次:主题阅读 在做主题阅读时的要求: 1. 知道:知道应该读哪些书. 在面对如此庞大的相关资料时,我们要如何决定我们要研究的主题是什么呢. 如何判断属于 ...
- PyQt5-QDateEdit的简单使用
使用PyQt5开发图形界面,里面使用日期框,这里把这个QDateEdit组件命名为:beginDate from PyQt5.QtCore import QDate 1.初始化赋值,不设置则默认为20 ...
- Sublime Text(代码编辑软件)
特点 Sublime Text 3是一个轻量.简洁.高效.跨平台的编辑器,方便的配色以及兼容vim快捷键等各种优点: 它体积小巧,无需安装,绿色便携:它可跨平台支持Windows/Mac/Linux: ...
- 零基础自学Python是看书还是看视频?
很多人都碍于Python培训班的高昂费用和有限的空余时间都选择自学Python,但是没有老师帮助,显得有些迷茫,不知应该从何处学起,也不知识看书学习还是应该看视频学习.本就来谈谈这个话题. 我们先 ...
- vue 项目初始化
初始化 vue init webpack-simple myproject 安裝 npm install 运行 npm run dev 访问地址 http://localhost:8080/ 安装we ...
- 动态规划 ---- 最长公共子序列(Longest Common Subsequence, LCS)
分析: 完整代码: // 最长公共子序列 #include <stdio.h> #include <algorithm> using namespace std; ; char ...
- 服务器上搭建使用SSH账户登录的Git仓库
1.安装git yum install -y git 2.创建git仓库保存的目录 mkdir /data/git_repo 3.初始化空仓库 cd /data/git_repogit init -- ...
- sql 应用记录
SELECT * FROM (select aa.*,bb.mentalvisitid, ' then '家庭访视' else '电话' end as BCSFXS ,bb.visitdate, ' ...
- hadoop中遇到的各种错误记录
hadoop中namenode无法启动 转载链接:https://blog.csdn.net/love666666shen/article/details/74350358 使用pi ...