ForgetSou | Blog

❤ 武统台湾 刻不容缓 ❤

0%

简介

底部导航栏是我们日常开发中经常用到的导航工具,用于切换到不同的展示页,比如微信、支付宝、淘宝等大厂APP都是使用底部导航栏设计,此设计也符合用户的使用习惯,下面我们使用flutter创建一个简单的底部工具栏。

效果图


示例

在fluuter开发中,万物皆是Wdiget, flutter官方提供的一个底部导航组件BottomNavigationBar,我们就使用BottomNavigationBar创建。

方式一

import 'package:flutter/material.dart';
import 'package:flutter/foundation.dart' show SynchronousFuture;
import 'package:flutter_localizations/flutter_localizations.dart';

void main() => runApp(new MyApp());

class ZDLocalizations {
ZDLocalizations(this.locale);

final Locale locale;

static ZDLocalizations of(BuildContext context) {
return Localizations.of<ZDLocalizations>(context, ZDLocalizations);
}

static Map<String, Map<String, String>> _localizedValues = {
'en': {
'title': 'List View',
},
'zh': {
'title': '列表视图',
},
};

String get title {
return _localizedValues[locale.languageCode]['title'];
}
}

class DemoLocalizationsDelegate extends LocalizationsDelegate<ZDLocalizations> {
const DemoLocalizationsDelegate();

@override
bool isSupported(Locale locale) => ['en', 'zh'].contains(locale.languageCode);

@override
Future<ZDLocalizations> load(Locale locale) {
// Returning a SynchronousFuture here because an async "load" operation
// isn't needed to produce an instance of DemoLocalizations.
return SynchronousFuture<ZDLocalizations>(ZDLocalizations(locale));
}

@override
bool shouldReload(DemoLocalizationsDelegate old) => false;
}

// 静态类
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
// final wordPair = new WordPair.random();
return new MaterialApp(
debugShowCheckedModeBanner: false,
home: new CreateHome(),
theme: new ThemeData(
primaryColor: Colors.orange,
),
// 国际化
localizationsDelegates: [
const DemoLocalizationsDelegate(),
GlobalMaterialLocalizations.delegate,
GlobalWidgetsLocalizations.delegate,
],
supportedLocales: [const Locale('en', ''), const Locale('zh', '')],
);
}
}

// 动态类
class CreateHome extends StatefulWidget {
@override
CreateHomeState createState() => CreateHomeState();
}

class CreateHomeState extends State<CreateHome> {
int _currentIndex = 0;
final _bodyOptions = [
Text('主页'),
Text('商城'),
Text('消息'),
];

// IBAction
void backOnPressed() {}

void menuOnPressed() {}

void onTabBarItemTapped(int idx) {
setState(() {
_currentIndex = idx;
});
}

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: _createAppBar(),
body: Center(child: _bodyOptions.elementAt(_currentIndex)),
bottomNavigationBar: _createTabBar(),
);
}

Widget _createAppBar() {
return new AppBar(
brightness: Brightness.dark,
elevation: 0.5,
iconTheme: IconThemeData(color: Colors.white),
title: Text(
ZDLocalizations.of(context).title,
style: TextStyle(color: Colors.white),
),
actions: [
IconButton(
icon: Icon(Icons.menu),
onPressed: menuOnPressed,
),
],
leading: IconButton(
icon: Icon(
Icons.arrow_back_ios,
),
onPressed: backOnPressed,
),
);
}

Widget _createTabBar() {
return new BottomNavigationBar(
fixedColor: Colors.blue,
backgroundColor: Colors.orange,
currentIndex: _currentIndex,
onTap: onTabBarItemTapped,
items: [
BottomNavigationBarItem(icon: Icon(Icons.home), label: '主页'),
BottomNavigationBarItem(icon: Icon(Icons.shop), label: '商城'),
BottomNavigationBarItem(icon: Icon(Icons.message), label: '消息')
],
);
}
}

说明:

以上代码有国际化示例部分,本博主比较懒,国际化的内容没删除,直接从工程里Copy出来的。

阅读全文 »

一. 简述

img是一个跨平台的移动数据库引擎。

Realm 中文文档

Realm平台是基于noSQL的服务器和客户端组件的组合,该组件通过快速高效的同步协议进行连接,以实现实时,连接的应用程序和服务,无论网络状态如何,它们都具有响应能力和性能。Realm平台具有两个主要组件:Realm数据库和Realm对象服务器。这两个组件协同工作以自动同步数据,从而实现大量用例,从离线优先应用程序,现场服务和数据收集应用程序,以数据可用性和用户响应能力为关键的移动服务开始。此外,通过与现有后端(SQL,Kafka等)的集成功能,Realm Platform是一种在利用现有(有时是传统)系统和数据源的同时构建现代实时服务体验的绝佳方法。

领域平台的高级示意图

Realm数据库嵌入在客户端上,是一个功能齐全的,面向对象的跨平台数据库,可将数据本地存储在设备上。它适用于主要的移动语言,例如Swift和Objective-C(iOS),Java(Android),C#(Xamarin,.NET)和JavaScript(React Native和Node.js)。

Realm数据库是轻量级且高性能的,能够处理非常大的数据负载并在几分之一秒内运行查询。它基于共享的活动对象,无需编写网络,序列化或对象关系映射代码,即可与Realm Object Server实时无缝同步数据。

Realm 性能优于 FMDB 和 Core Data,支持 OC 和 Swift 语言开发,使用更加简单、方便。

下面主要说下Swift语言下的 Realm 数据库的使用和 RealmSwift 数据迁移

二. Cocopods 安装

pod 'RealmSwift'
阅读全文 »