技术标签: flutter开发 flutter android studio 前端
开发中,必须要用到的也就这三个小插件了。这里主要讲一下 EventBus,轮播图和沉浸式状态栏教程很多并且很简单。
下面主要用上面三个实现的功能,b站广告图,沉浸式状态栏,以及点击左上角头像用 eventbus 进入我的页面,效果图如下:
下载链接,建议去 CSDN 下载,不要积分,CSDN 是阶段性代码,GitHub 有时忘记传上去:
CSDN :flutter_blbl.zip-Android文档类资源-CSDN下载
GitHub:https://github.com/wuqingsen/FlutterLearnDemo
EventBus 在 Android 就是特别常用的,用来隔着页面发送消息,处理一些事情;在 Flutter 中我自然也是想到了它。
在这里我对它的封装方式很类似与我在 Android 中封装方式:封装到 BaseActivity 中,想用就直接使用了。
添加依赖:
event_bus: ^2.0.0
简单对 EventBus 封装一下,event_bus.dart 中代码:
import 'package:event_bus/event_bus.dart';
// 创建EventBus
class EventBusUtils {
static EventBus _instance;
static EventBus getInstance() {
if (null == _instance) {
_instance = new EventBus();
}
return _instance;
}
}
// event 监听
class MyEventBus {
//传递的数据
dynamic data;
//唯一标识码
int code;
MyEventBus({this.data, this.code});
}
basewidget.dart 中代码,之后所有的 widget 继承它就可以,对于 BaseWidget 可以看这里:
Flutter 2进阶(七):BaseWidget的封装_wuqingsen1的博客-程序员宅基地
import 'dart:async';
import 'package:event_bus/event_bus.dart';
import 'package:flutter/material.dart';
import 'event_bus.dart';
abstract class BaseWidget extends StatefulWidget {
@override
BaseWidgetState createState() => getState();
BaseWidgetState getState();
}
abstract class BaseWidgetState<T extends BaseWidget> extends State<T> {
StreamSubscription myEventBus;
@override
void initState() {
super.initState();
}
@override
Widget build(BuildContext context) {}
@override
void dispose() {
super.dispose();
if (myEventBus != null) {
myEventBus.cancel();
}
}
}
为了方便看懂,很简单,大概流程:注册并发送广播,接收广播并用唯一标识码判断是哪个页面发送的并作出处理。
点击事件中发送广播:
onTap: () {
//头像点击,发广播
EventBusUtils.getInstance()
.fire(MyEventBus(code: EventCodeHeadClick, data: "发送广播"));
}
接收广播并处理:
@override
void initState() {
super.initState();
//接收广播
myEventBus = EventBusUtils.getInstance().on<MyEventBus>().listen((event) {
switch (event.code) {
case EventCodeHeadClick:
//点击头像,进入到我的页面
setState(() {
_controller.jumpToPage(3);
});
break;
}
});
}
上面我自定义了唯一标识码,constants 中代码存放全局变量:
///全局公用变量
const SPName = "name"; //SP存储姓名
const SPPassword = "password"; //SP存储密码
String USERNAME;
///广播序号
const EventCodeHeadClick = 0x100001; //首页点击头像
const EventCodeMy = 0x100002; //
这个就很简单了,依赖一加直接用:
flutter_swiper: ^1.1.6
使用:
import 'package:flutter/material.dart';
import 'package:flutter_blbl/model/base/stateful_widget_base.dart';
import 'package:flutter_swiper/flutter_swiper.dart';
class HomeTabPage extends BaseWidget {
final String name;
HomeTabPage({this.name});
@override
_HomeTabPageState createState() => _HomeTabPageState();
@override
BaseWidgetState getState() {
return _HomeTabPageState();
}
}
class _HomeTabPageState extends BaseWidgetState<HomeTabPage> {
List<Image> imgs = [
Image.asset(
'images/banner_1.jpeg',
fit: BoxFit.cover,
),
Image.asset(
'images/banner_2.jpeg',
fit: BoxFit.cover,
),
Image.asset(
'images/banner_3.jpeg',
fit: BoxFit.cover,
),
];
@override
Widget build(BuildContext context) {
return Container(
child: Column(children: [
_getBanner(),
]),
);
}
//广告图
_getBanner() {
return Container(
width: MediaQuery.of(context).size.width,
height: 200.0,
child: Swiper(
itemBuilder: _swiperBuilder,
itemCount: imgs.length,
pagination: new SwiperPagination(
alignment: Alignment.bottomRight,
builder: DotSwiperPaginationBuilder(
color: Colors.grey,
activeColor: Colors.white,
size: 6,
activeSize: 6,
)),
scrollDirection: Axis.horizontal,
autoplay: true,
onTap: (index) => print('点击了第$index个'),
));
}
Widget _swiperBuilder(BuildContext context, int index) {
return InkWell(
onTap: () {},
child: Container(
padding: EdgeInsets.all(10),
child: ClipRRect(
borderRadius: BorderRadius.all(Radius.circular(6)),
child: imgs[index]),
),
);
}
}
依赖一加直接用:
flutter_statusbar_manager: ^2.0.0
封装一下:
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_statusbar_manager/flutter_statusbar_manager.dart';
///沉浸式状态栏
enum StatusStytle { LIGHT_CONTENT, DARK_CONTENT } //明亮和黑暗
class MyNavigationBar extends StatelessWidget {
final StatusStytle statusStytle;
final Color color;
final double height;
final Widget child;
const MyNavigationBar(
{Key key,
this.statusStytle = StatusStytle.DARK_CONTENT,
this.color = Colors.white,
this.height = 46,
this.child})
: super(key: key);
@override
Widget build(BuildContext context) {
_statusBarInit();
//状态栏高度
var top = MediaQuery.of(context).padding.top;
return Container(
width: MediaQuery.of(context).size.width,
height: top + height,
child: child,
padding: EdgeInsets.only(top: top),
decoration: BoxDecoration(color: color),
);
}
void _statusBarInit() {
//沉浸式状态栏
FlutterStatusbarManager.setColor(color, animated: false);
FlutterStatusbarManager.setStyle(statusStytle == StatusStytle.DARK_CONTENT
? StatusBarStyle.DARK_CONTENT
: StatusBarStyle.LIGHT_CONTENT);
}
}
使用:
MyNavigationBar(
height: 50,
child: _appBar(),
color: Colors.white,
statusStytle: StatusStytle.DARK_CONTENT,
)
文章浏览阅读1k次。通过使用ajax方法跨域请求是浏览器所不允许的,浏览器出于安全考虑是禁止的。警告信息如下:不过jQuery对跨域问题也有解决方案,使用jsonp的方式解决,方法如下:$.ajax({ async:false, url: 'http://www.mysite.com/demo.do', // 跨域URL ty..._nginx不停的xhr
文章浏览阅读2k次。关于在 Oracle 中配置 extproc 以访问 ST_Geometry,也就是我们所说的 使用空间SQL 的方法,官方文档链接如下。http://desktop.arcgis.com/zh-cn/arcmap/latest/manage-data/gdbs-in-oracle/configure-oracle-extproc.htm其实简单总结一下,主要就分为以下几个步骤。..._extproc
文章浏览阅读1.5w次。linux下没有上面的两个函数,需要使用函数 mbstowcs和wcstombsmbstowcs将多字节编码转换为宽字节编码wcstombs将宽字节编码转换为多字节编码这两个函数,转换过程中受到系统编码类型的影响,需要通过设置来设定转换前和转换后的编码类型。通过函数setlocale进行系统编码的设置。linux下输入命名locale -a查看系统支持的编码_linux c++ gbk->utf8
文章浏览阅读750次。今天准备从生产库向测试库进行数据导入,结果在imp导入的时候遇到“ IMP-00009:导出文件异常结束” 错误,google一下,发现可能有如下原因导致imp的数据太大,没有写buffer和commit两个数据库字符集不同从低版本exp的dmp文件,向高版本imp导出的dmp文件出错传输dmp文件时,文件损坏解决办法:imp时指定..._imp-00009导出文件异常结束
文章浏览阅读143次。当下是一个大数据的时代,各个行业都离不开数据的支持。因此,网络爬虫就应运而生。网络爬虫当下最为火热的是Python,Python开发爬虫相对简单,而且功能库相当完善,力压众多开发语言。本次教程我们爬取前程无忧的招聘信息来分析Python程序员需要掌握那些编程技术。首先在谷歌浏览器打开前程无忧的首页,按F12打开浏览器的开发者工具。浏览器开发者工具是用于捕捉网站的请求信息,通过分析请求信息可以了解请..._初级python程序员能力要求
文章浏览阅读7.6k次,点赞2次,收藏6次。@Service标注的bean,类名:ABDemoService查看源码后发现,原来是经过一个特殊处理:当类的名字是以两个或以上的大写字母开头的话,bean的名字会与类名保持一致public class AnnotationBeanNameGenerator implements BeanNameGenerator { private static final String C..._@service beanname
文章浏览阅读6.9w次,点赞73次,收藏463次。1.前序创建#include<stdio.h>#include<string.h>#include<stdlib.h>#include<malloc.h>#include<iostream>#include<stack>#include<queue>using namespace std;typed_二叉树的建立
文章浏览阅读7.1k次。在Asp.net上使用Excel导出功能,如果文件名出现中文,便会以乱码视之。 解决方法: fileName = HttpUtility.UrlEncode(fileName, System.Text.Encoding.UTF8);_asp.net utf8 导出中文字符乱码
文章浏览阅读2.1k次,点赞4次,收藏23次。第一次实验 词法分析实验报告设计思想词法分析的主要任务是根据文法的词汇表以及对应约定的编码进行一定的识别,找出文件中所有的合法的单词,并给出一定的信息作为最后的结果,用于后续语法分析程序的使用;本实验针对 PL/0 语言 的文法、词汇表编写一个词法分析程序,对于每个单词根据词汇表输出: (单词种类, 单词的值) 二元对。词汇表:种别编码单词符号助记符0beginb..._对pl/0作以下修改扩充。增加单词
文章浏览阅读773次。我在使用adb.exe时遇到了麻烦.我想使用与bash相同的adb.exe shell提示符,所以我决定更改默认的bash二进制文件(当然二进制文件是交叉编译的,一切都很完美)更改bash二进制文件遵循以下顺序> adb remount> adb push bash / system / bin /> adb shell> cd / system / bin> chm..._adb shell mv 权限
文章浏览阅读6.8k次,点赞12次,收藏125次。1. 单目相机标定引言相机标定已经研究多年,标定的算法可以分为基于摄影测量的标定和自标定。其中,应用最为广泛的还是张正友标定法。这是一种简单灵活、高鲁棒性、低成本的相机标定算法。仅需要一台相机和一块平面标定板构建相机标定系统,在标定过程中,相机拍摄多个角度下(至少两个角度,推荐10~20个角度)的标定板图像(相机和标定板都可以移动),即可对相机的内外参数进行标定。下面介绍张氏标定法(以下也这么称呼)的原理。原理相机模型和单应矩阵相机标定,就是对相机的内外参数进行计算的过程,从而得到物体到图像的投影_相机-投影仪标定
文章浏览阅读2.2k次。文章目录Wayland 架构Wayland 渲染Wayland的 硬件支持简 述: 翻译一篇关于和 wayland 有关的技术文章, 其英文标题为Wayland Architecture .Wayland 架构若是想要更好的理解 Wayland 架构及其与 X (X11 or X Window System) 结构;一种很好的方法是将事件从输入设备就开始跟踪, 查看期间所有的屏幕上出现的变化。这就是我们现在对 X 的理解。 内核是从一个输入设备中获取一个事件,并通过 evdev 输入_wayland