示例 github：flutterlayout https://github.com/LiuC520/flutterlayout
MaterialApp
连载：flutter布局-1-column
连载：flutter布局-2-row
连载：flutter布局-3-center
连载：flutter布局-4-container
连载：[flutter布局-5-Matrix4矩阵变换
这个是有状态的widget，有以下参数
this.navigatorKey, // 导航的key
this.home, // 主页
this.routes = const <String, WidgetBuilder>{},// 路由
this.initialRoute,//初始路由
this.onGenerateRoute,//生成路由
this.onUnknownRoute,//位置路由
this.navigatorObservers = const <NavigatorObserver>[],//导航的观察者
this.builder,//widget的构建
this.title = '',//设备用于识别用户的应用程序的单行描述。在Android上，标题显示在任务管理器的应用程序快照上方，当用户按下“最近的应用程序”按钮时会显示这些快照。 在iOS上，无法使用此值。 来自应用程序的`Info.plist`的`CFBundleDisplayName`在任何时候都会被引用，否则就会引用`CFBundleName`。要提供初始化的标题，可以用 onGenerateTitle。
this.onGenerateTitle,//每次在WidgetsApp构建时都会重新生成
this.color,//背景颜色
this.theme,//主题，用ThemeData
this.locale,//app语言支持
this.localizationsDelegates,//多语言代理
this.localeResolutionCallback,//
this.supportedLocales = const <Locale>[Locale('en', 'US')],//支持的多语言
this.debugShowMaterialGrid = false,//显示网格
this.showPerformanceOverlay = false,//打开性能监控，覆盖在屏幕最上面
this.checkerboardRasterCacheImages = false,
this.checkerboardOffscreenLayers = false,
this.showSemanticsDebugger = false,//打开一个覆盖图，显示框架报告的可访问性信息 显示边框
this.debugShowCheckedModeBanner = true,//右上角显示一个debug的图标
大家可以新建一个项目，在main.dart文件里面就能看到这个东西啦
* 如果home首页指定了，routes里面就不能有'/'的根路由了，会报错，/指定的根路由就多余了
* 如果没有home指定具体的页面，那routes里面就傲有/来指定根路由
* 路由的顺序按照下面的规则来：
* 1、如果有home，就会从home进入
* 2、如果没有home，有routes，并且routes指定了入口'/'，就会从routes的/进入
* 3、如果上面两个都没有，或者路由赵达不到，如果有 onGenerateRoute，就会进入生成的路由
* 4、如果连上面的生成路由也没有，就会走到onUnknownRoute，不明所以的路由，比如网络连接失败，可以进入断网的页面
具体的用法看下下面的代码
1、home：主页面
home: Home(),
2、routes：路由
final routes = {
'/Transform1': (BuildContext context) => new Transform1(),
'/Scale1': (BuildContext context) => new Scale1(),
'/Rotation1': (BuildContext context) => new Rotation1(),
'/': (BuildContext context) => new Home(),
};
...
在build里面
routes: routes,
routes是一个对象，键是字符串，值是widgetbuilder，也就是widget
里面包含了页面的路由页面配置。
3、initialRoute: '/',初始路由
4、onGenerateRoute: 生成路由
有下面的用法
onGenerateRoute: (RouteSettings settings) {
return new MaterialPageRoute<void>(
settings: settings,
builder: (BuildContext context) => Text('生成了路由'),
);
onGenerateRoute: (RouteSettings settings) {
return new MaterialPageRoute<void>(
settings: settings,
builder: (BuildContext context) => MaterialApp(
// routes: <String, WidgetBuilder>{
// '/': (context) => Text('用MaterialApp生成了新的路由')
// },
routes: routes,
),
);
},
5、onUnknownRoute: 未知路由
onUnknownRoute: (RouteSettings settings) => MaterialPageRoute<void>(
settings: settings,
builder: (BuildContext context) => Text('路由找不到了')),
6、navigatorObservers: 导航观察者
导航路由在跳转时的回调，比如 push，pop，remove，replace是，可以拿到当前路由和后面路由的信息。
route.settings.name可以拿到路由的名字
navigatorObservers: <NavigatorObserver>[NewObserver()],
//导航的观察者
//继承NavigatorObserver
class NewObserver extends NavigatorObserver {
@override
void didPush(Route route, Route previousRoute) {
// 当调用Navigator.push时回调
super.didPush(route, previousRoute);
//可通过route.settings获取路由相关内容
print(route.settings);
print(previousRoute);
}
@override
void didPop(Route route, Route previousRoute) {
// TODO: implement didPop
// 当调用Navigator.pop时回调
super.didPop(route, previousRoute);
print(route);
//route.currentResult获取返回内容
print(previousRoute);
}
@override
void didRemove(Route route, Route previousRoute) {
// TODO: implement didRemove
// 当调用Navigator.Remove时回调
super.didRemove(route, previousRoute);
print(route);
print(previousRoute);
}
7、builder: widget
这个是直接渲染这个builder，不会走路由，优先渲染这个里面的widget
builder: (BuildContext context, Widget w) => Text("生成新的view"),
8、title:任务管理器显示的标题
设备用于识别用户的应用程序的单行描述。在Android上，标题显示在任务管理器的应用程序快照上方，当用户按下“最近的应用程序”按钮时会显示这些快照。 在iOS上，无法使用此值。 来自应用程序的Info.plist的CFBundleDisplayName在任何时候都会被引用，否则就会引用CFBundleName。要提供初始化的标题，可以用 onGenerateTitle。
9、onGenerateTitle: 生成任务管理器显示的标题
每次在WidgetsApp构建时都会重新生成
import 'dart:math';
...
Random a = Random(10);
...
在build的方法里面
onGenerateTitle: (BuildContext context) =>
'${a.nextInt(100)}-随机标题', //生成app的name，不能反回空，返回的是字符串
10、 color: Colors.green,//任务管理器的标题背景颜色
11、 theme //主题
具体的用法如下
theme: new ThemeData(
primarySwatch: Colors.red, brightness: Brightness.light),
ThemeData单独拿一篇文章来给大家演示，演示更直观些。
11、 showPerformanceOverlay //打开性能监视，覆盖在屏幕最上面。
默认值是false
显示内容如下
CPU 15.5fps 60.7ms/frame
UI 0.5fps 2059.2ms/frame
12、 checkerboardRasterCacheImages
默认值是false
13、 checkerboardOffscreenLayers
默认值是false
14、 showSemanticsDebugger 打开一个覆盖图，显示框架报告的可访问性信息
默认值是false
15、 debugShowCheckedModeBanner 右上角显示一个debug的图标
默认值是false
16、 debugShowMaterialGrid 显示网格
默认值是false
17、 locale 支持的语言
18、 supportedLocales 支持的多国语言
static final List<Locale> supportedLocales = [
const Locale('en', 'US'),
const Locale('fi', 'FI'),
];
19、 localizationsDelegates 多语言代理
static final List<LocalizationsDelegate> localizationsDelegates = [
AppLocalizations.delegate,
GlobalMaterialLocalizations.delegate,
GlobalWidgetsLocalizations.delegate,
];
20、 localeResolutionCallback 多语言回调
static Locale localeResolutionCallback(
Locale locale, Iterable<Locale> supportedLocales) {
for (var supportedLocale in supportedLocales) {
if (supportedLocale.languageCode == locale.languageCode) {
return supportedLocale;
}
}
return supportedLocales.first;
}
网友评论