иллюстрировать
В настоящее время добавлены переходы маршрутизации, и страницы можно переходить с параметрами. В раскрывающемся списке можно настроить стиль обновления, нажмите IOSStatus BarВернемся к началу, это было проверено до сих пор. использование менеджера состоянияMobx, я чувствую, что дляReduxЭто будет немного сложнее в использовании.Ниже приведено изображение GIF для предварительного просмотра.Явление заикания связано с тем, что частота кадров записи экрана немного низкая.
адрес проекта:GitHub.com/код TE/Flutong…, Нерегулярные обновления, добро пожаловать на старт.
Android APK, отсканируйте код для установки
Пароль установки: 123456
Предварительная версия Android
предварительная версия iOS
Библиотека зависимостей
environment:
sdk: ">=2.1.0 <3.0.0"
dependencies:
flutter:
sdk: flutter
mobx:
flutter_mobx: // Mobx
cupertino_icons: ^0.1.2
flutter_svg: ">=0.12.4" // 处理SVG图片
carousel_slider: ^1.3.0 // 轮播图
fluro: "^1.4.0" // 路由
provider: ^2.0.1 // 用于包裹mobx
dev_dependencies:
flutter_test:
sdk: flutter
build_runner: ^1.3.1 //Mobx依赖
mobx_codegen: // Mobx依赖
FlutterВерсия
Flutter 1.5.9-pre.223 • channel master • https://github.com/flutter/flutter.git
Framework • revision b76a1e8312 (25 hours ago) • 2019-05-13 09:06:30 +0100
Engine • revision 816d3fc586
Tools • Dart 2.3.1 (build 2.3.1-dev.0.0 a0290f823c)
Изменить цвет строки состояния системы
import 'package:flutter/material.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter_book/containers/Entrance.dart';
import 'package:flutter_book/helpers/constants.dart' show AppColors;
import 'package:flutter/services.dart';
void main() {
// 修改系统状态栏颜色
SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
systemNavigationBarColor: Color(AppColors.themeColor), // navigation bar color
statusBarColor: Color(AppColors.themeColor), // status bar color
));
runApp(MyApp());wenti
}
Настройте содержимое, отображаемое в левой панели навигации панели приложений.
appBar: AppBar(
...
leading: IconButton(
alignment: Alignment.centerRight,
icon: SvgPicture.asset(
'assets/icon/icon_trophy.svg',
width: Constants.appBarIconSize + 5.0,
height: Constants.appBarIconSize + 5.0,
),
onPressed: () {
print("ok");
},
)
...
)
запросы средств массовой информации
MediaQuery.of(context)
Конфигурация ресурса
assets:
- assets/icon/
- lib/containers/
- lib/model/
- lib/helpers/
- lib/routers/
- assets/images/
конфигурация маршрутизации
Здесь я используюfluroНастраивать роутинг мне тут лень, поэтому нативный метод я не использовал, но он нам помог инкапсулировать много методов и пользоваться им очень удобно.Поговорим о настройке роутинга.
lib\routers\routers.dart
Настройте модуль, соответствующий маршруту, который можно понимать какVue-routerилиReact-routerТаким же образом сначала настройте соответствующий маршрут к модулю, к которому вы хотите перейти.
import 'package:fluro/fluro.dart';
import 'package:flutter/material.dart';
import 'package:flutter_book/routers/route_handlers.dart';
class Routes {
static String root = "/";
static String setting = "/setting";
static String detail = "/detail";
static String demoSimpleFixedTrans = "/demo/fixedtrans";
static String demoFunc = "/demo/func";
static String deepLink = "/message";
static void configureRoutes(Router router) {
router.notFoundHandler = Handler(
handlerFunc: (BuildContext context, Map<String, List<String>> params) {
print("ROUTE WAS NOT FOUND !!!");
});
router.define(root, handler: rootHandler);
router.define(setting, handler: settingRouteHandler);
router.define(detail, handler: detailRouterHandler);
}
}
lib\routers\route_handlers.dart
Здесь мы можем обработать некоторые переданные параметры, а затем поместить параметры в класс для создания экземпляра.
import 'package:flutter_book/containers/Setting.dart';
import 'package:flutter_book/containers/FirstScreen.dart';
import 'package:flutter_book/containers/Detail.dart';
import 'package:fluro/fluro.dart';
import 'package:flutter/material.dart';
import 'package:flutter_book/helpers/fluro_convert_util.dart';
Handler rootHandler = Handler(
handlerFunc: (BuildContext context, Map<String, List<String>> params) {
return FirstScreen();
});
Handler settingRouteHandler = Handler(
handlerFunc: (BuildContext context, Map<String, List<String>> params) {
return Setting();
});
Handler detailRouterHandler = Handler(
handlerFunc: (BuildContext context, Map<String, List<String>> params) {
return Detail(
title: FluroConvertUtils.fluroCnParamsDecode(params["title"]?.first));
});
lib\main.dart
будет маршрут сFlutterПривязать, чтобы ваш маршрут мог вступить в силу
class MyApp extends StatelessWidget {
MyApp() {
final router = new Router();
Routes.configureRoutes(router);
Application.router = router;
}
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Book',
theme: ThemeData(
primaryColor: Color(AppColors.themeColor),
accentColor: Color(AppColors.themeColor),
scaffoldBackgroundColor: Color(AppColors.themeColor)),
home: Entrance(),
onGenerateRoute: Application.router.generator,
);
}
}
использовать
import 'package:fluro/fluro.dart';
import 'package:flutter_book/routers/application.dart';
import 'package:flutter_book/helpers/fluro_convert_util.dart';
...代码省略了
Application.router.navigateTo(
context,
"/detail?title=${FluroConvertUtils.fluroCnParamsEncode('热门图书')}",
transition: TransitionType.native
);
параметры маршрутизации
Маршрут не поддерживает китайские символы и должен быть закодирован, а затем декодирован.
import 'dart:convert';
/// fluro 参数编码解码工具类
class FluroConvertUtils {
/// fluro 传递中文参数前，先转换，fluro 不支持中文传递
static String fluroCnParamsEncode(String originalCn) {
StringBuffer sb = StringBuffer();
var encoded = Utf8Encoder().convert(originalCn);
encoded.forEach((val) => sb.write('$val,'));
return sb.toString().substring(0, sb.length - 1).toString();
}
/// fluro 传递后取出参数，解析
static String fluroCnParamsDecode(String encodedCn) {
var decoded = encodedCn.split('[').last.split(']').first.split(',');
var list = <int>[];
decoded.forEach((s) => list.add(int.parse(s.trim())));
return Utf8Decoder().convert(list);
}
}
кодирование
import 'package:flutter_book/helpers/fluro_convert_util.dart';
Application.router.navigateTo(
context,
"/detail?title=${FluroConvertUtils.fluroCnParamsEncode('热门图书')}",
transition: TransitionType.native,
// transitionDuration: const Duration(milliseconds: 300),
);
расшифровка
import 'package:flutter_book/helpers/fluro_convert_util.dart';
Handler detailRouterHandler = Handler(
handlerFunc: (BuildContext context, Map<String, List<String>> params) {
return Detail(
title: FluroConvertUtils.fluroCnParamsDecode(params["title"]?.first));
});
Использование диспетчера состояний Mobx
Конфигурация pubspec.yaml
environment:
sdk: ">=2.1.0 <3.0.0"
dependencies:
flutter:
sdk: flutter
mobx:
flutter_mobx:
# The following adds the Cupertino Icons font to your application.
# Use with the CupertinoIcons class for iOS style icons.
cupertino_icons: ^0.1.2
flutter_svg: ">=0.12.4"
carousel_slider: ^1.3.0
fluro: "^1.4.0"
provider: ^2.0.1
dev_dependencies:
flutter_test:
sdk: flutter
build_runner: ^1.3.1
mobx_codegen:
Несколько страниц используют один магазин
Здесь мы должны использовать дляprovider: ^2.0.1,аналогичныйReactизProvider. использоватьProviderобернуть наш компонент так, чтобыMobxи нашReactСвязаться.
React Provider
<Provider {...store}>
<Router history={browserHistory}
<App />
</Router>
</Provider>
Dart Provider
Dart ProviderТо же самое верно,Mobxа такжеFlutterсвязаться,lib/main.dartполный код, использование этого способа гарантирует, что вы создаете экземплярstoreэто тот же класс.
runApp(MultiProvider(
providers: [
Provider<FindStore>(
builder: (_) => FindStore(),
)
],
child: MyApp(),
));
как использовать
Моя навигация обнаруживает, что столбец отделен от содержимого ниже.Когда я нажимаю кнопку переключения навигации, она меняет отображаемую страницу, чтобы мы могли повторно использовать отображаемый слой.UIКомпоненты, данные помещаются в специальные файлы для управления.
Давайте посмотрим, как это делается
Нажав, а затем изменив данныеfindStore.setTile('tile', true);
навигацияlib/widgets/NavBar/FindNavBar.dart
import 'package:flutter/material.dart';
import 'package:flutter_svg/svg.dart';
import 'package:flutter_mobx/flutter_mobx.dart';
import 'package:flutter_book/helpers/constants.dart';
import 'package:flutter_book/stores/findStore.dart';
import 'package:provider/provider.dart';
class FindNavBar extends StatelessWidget {
@override
Widget build(BuildContext context) {
// 我们的store
final findStore = Provider.of<FindStore>(context);
return Observer(
builder: (_) => AppBar(
title: Text("发现"),
actions: <Widget>[
IconButton(
alignment: Alignment.centerRight,
onPressed: () {
findStore.setTile('tile', true);
findStore.counter();
},
icon: SvgPicture.asset(
'assets/icon/icon_more.svg',
width: Constants.appBarIconSize + 2.0,
height: Constants.appBarIconSize + 2.0,
color: Color(findStore.tile
? AppColors.fontColor
: AppColors.fontColorGray),
),
),
IconButton(
alignment: Alignment.centerLeft,
onPressed: () {
findStore.setTile('tile', false);
},
icon: SvgPicture.asset(
'assets/icon/icon_cube.svg',
width: Constants.appBarIconSize + 2.0,
height: Constants.appBarIconSize + 2.0,
color: Color(findStore.tile
? AppColors.fontColorGray
: AppColors.fontColor),
),
),
],
centerTitle: true,
elevation: 0,
),
);
}
}
содержаниеlib/containers/Find.dart
Обнаружено, что данные изменились, страница перерисовывается, чтобы получить новую страницу
import 'package:flutter/material.dart';
import 'package:flutter_book/widgets/Find/BookTile.dart';
import 'package:flutter_book/widgets/Find/BookCover.dart';
import 'package:flutter_book/stores/findStore.dart';
import 'package:provider/provider.dart';
import 'package:flutter_mobx/flutter_mobx.dart';
class Find extends StatefulWidget {
@override
_FindState createState() => _FindState();
}
class _FindState extends State<Find> {
@override
Widget build(BuildContext context) {
final findStore = Provider.of<FindStore>(context);
return Observer(builder: (_) => findStore.tile ? BookTile() : BookCover());
}
}
FindStore lib/stores/findStore.dart
import 'package:mobx/mobx.dart';
// Include generated file
part 'findStore.g.dart';
// This is the class used by rest of your codebase
class FindStore = _FindStore with _$FindStore;
// The store-class
abstract class _FindStore implements Store {
@observable
bool tile = false;
@observable
num count = 0;
@action
void setTile(String key, dynamic value) => tile = value;
@action
num counter() => this.count++;
}
Уведомление
Если вы делитесь одним со многими страницамиStoreНе импортируйте напрямую, а затем создайте экземпляр, например:
первая страницаdemo1.dart
Эту страницу мы импортировалиcounter.dartэтоstoreИ мы создаем его экземпляр, и когда мы нажимаем на изменения данных, страница будет повторно отображаться
import 'package:flutter/material.dart';
import 'package:flutter_mobx/flutter_mobx.dart';
import 'counter.dart'; // Import the Counter
final counter = Counter(); // Instantiate the store
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'MobX',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: const MyHomePage(),
);
}
}
class MyHomePage extends StatelessWidget {
const MyHomePage();
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('MobX Counter'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
'数值是:',
),
// Wrapping in the Observer will automatically re-render on changes to counter.value
Observer(
builder: (_) => Text(
'${counter.value}',
style: Theme.of(context).textTheme.display1,
),
),
],
),
),
floatingActionButton: FloatingActionButton(
onPressed: counter.increment,
tooltip: 'Increment',
child: Icon(Icons.add),
),
);
}
}
вторая страницаdemo2.dart
Мы также импортировали эту страницуcounter.dart，我们要的结果是第一个页面的数据变化了也影响这个页面，但是显然是不能的。 потому чтоstoreХоть он и один, но при инстанцировании он два разных, поэтому изменения данных первой страницы здесь на него не повлияют.
Как это решить? Мы можем использовать ранее упомянутоеProviderидти кMobxа такжеFlutterПодключаемся, а потом переходим к тому, что хотим через контекстStore,Напримерfinal findStore = Provider.of<FindStore>(context);
import 'package:flutter/material.dart';
import 'package:flutter_mobx/flutter_mobx.dart';
import 'counter.dart'; // Import the Counter
final counter = Counter(); // Instantiate the store
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'MobX',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: const MyHomePage(),
);
}
}
class MyHomePage extends StatelessWidget {
const MyHomePage();
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('MobX Counter'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
'第二个页面显示第一个页面的数是:',
),
Observer(
builder: (_) => Text(
'${counter.value}',
style: Theme.of(context).textTheme.display1,
),
),
],
),
),
);
}
}
общественный магазинcounter.dart
import 'package:mobx/mobx.dart';
// Include generated file
part 'counter.g.dart';
// This is the class used by rest of your codebase
class Counter = _Counter with _$Counter;
// The store-class
abstract class _Counter implements Store {
@observable
int value = 0;
@action
void increment() {
value++;
}
}
правильное использование
заключительные замечания
Спасибо за просмотр, я сейчас пишуFlutterЕсли вы встретите какие-то ямы, вы можете наступить на ямы.Вы можете высказать любые замечания и предложения, спасибо.