Flutter Web 网站之主页框架搭建 - 简书
source link: https://www.jianshu.com/p/fcd1bcd50fb2?
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
Flutter Web 网站之主页框架搭建
上期主要完成环境的搭建和部署，最终在jetpack.net.cn地址上呈现，这期我们就开始搭建主页，构建一个可以兼容三端（Android、Ios、Web）的主页。
在lib文件夹下创建home.dart文件，如图
打开文件，输入st出来的提示选择第一个，如图
这样就自动生成一个完整的模版代码，一个小小的技巧，请笑纳。最后命名PageHome，这里简单说下命名规则，只是建议，页面以Page开头，非页面以Widget开头，这样在其他地方引用的时候容易寻找，提高查找效率。接下来，我们就用一个兼容三端的组件来构建主页，不卖关子，我们使用Material主题，因为我是Android开发，更喜欢这个主题，我们在新增组件的时候总感觉很麻烦，其实也有个小技巧，如图
选第一个就可以生成一个包裹组件，继续看图
然后将widget改为Material。然后添加Padding，Scaffold组件如图
Padding的用意很简单，加一个左右边距，而在web，和手机上的边距是不一样的，不能固定死，我画个图展示展示下，如图
所以使用ResponsiveWidget判断是否是小屏幕，如果屏幕变小则使用小边距来适配，这里注意是小屏幕，不是针对的Android或者苹果手机，要注意不能混淆理解，浏览器也可以缩小到手机屏幕大小对吧，要理解ResponsiveWidget请看前期博客：一个Flutter widget自动适配不同UI到Web、Android
还有一个ScreenUtil，这个你可以理解为相当于Android中的dp单位，他负责的就是等比适配，不会让大小分辨率的屏幕看起来差距很大。这个工具有个初始化的过程
ScreenUtil.instance = ScreenUtil.getInstance()..init(context);
而且初始化必须在MaterialApp包裹中，为什么呢？因为我们使用了MediaQuery动态获取屏幕的宽高，详细请看官方文档https://api.flutter.dev/flutter/widgets/MediaQuery-class.html里面讲的很清楚：
WidgetsApp and MaterialApp, which introduce a MediaQuery and keep it up to date with the current screen metrics as they change.
目前WidgetsApp和MaterialApp实现了MediaQuery的逻辑，所以你不在MaterialApp中初始化是会报错地，知道了吧。接下来看下实际运行效果，我们将内容设置成红色来看，如图
屏幕缩小后如图
这就是我们要的效果，其实已经有了两个框架封装的很完整，但前期我们为什么没有选择引用它们呢，而且他们实现的似乎更合理，请看他们的代码风格如图
一个ScreenTypeLayout这个组件实现了四个屏幕的适配，框架引用：
responsive_builder: ^0.1.5
我为什么没有选择直接使用呢？其实我们在明白其中原理后确实可以直接引用，但我还是建议自己写一遍，通过自己的实现，更清楚其中的道理不是吗。前期的学习过程中，我们尽量的不去引用，选择自己实现，也是加快提高自己的一个办法。多多学习，多多练习。接下来我们实现Scaffold部分，Scaffold这个组件太好用了，先看下它原本的样子
，它就像一个大的容器，帮住我们组织好了各个组件的位置，是对一个基础UI的高度抽象。
简单分析下它的参数源码
其实这里最主要的三个常用的部分appBar、body、floatingActionButton，正好是我们构建一个UI的常用构造，所以这个组件基本是我们使用频率很高的一个组件，请认真学习它，更详细的学习，请看https://api.flutter.dev/flutter/material/Scaffold-class.html，这里面有几个例子，认真学习哦，我们现在通过它，来构建我们的主页代码，请看效果图：
我们先构建了AppBar的内容，怎么实现的呢，请看代码
@override
Widget build(BuildContext context) {
ScreenUtil.instance = ScreenUtil.getInstance()..init(context);
return Material(
child: Padding(
padding: EdgeInsets.symmetric(
horizontal: !ResponsiveWidget.isSmallScreen(context)
? (ScreenUtil.getInstance().setWidth(108))
: (ScreenUtil.getInstance().setWidth(6))),
child: Scaffold(
appBar: AppBar(
title: _buildTitle(), /// 左边标题
backgroundColor: Color(0xFFf1f3f4),
actions: !ResponsiveWidget.isSmallScreen(context)
? _buildActions(context)
: null, /// 右边的menu菜单，这里在小屏幕不显示。
),
body: Center(child: Text('You have pressed the button $_count times.')),
),
));
}
Widget _buildTitle() {
return RichText(
text: TextSpan(
// Note: Styles for TextSpans must be explicitly defined.
// Child text spans will inherit styles from parent
style: TextStyle(
fontSize: 14.0,
color: Colors.black,
),
children: <TextSpan>[
TextSpan(
text: "Jetpack",
style: TextStyles.logo,
),
TextSpan(
text: ".net.cn",
style: TextStyles.logo.copyWith(
color: Color(0xFF50AFC0),
),
),
],
),
);
}
_buildActions(BuildContext context) {
return <Widget>[
MaterialButton(
child: Text(
'Home',
style: TextStyles.menuItem,
),
onPressed: () {
if (ResponsiveWidget.isSmallScreen(context)) Navigator.pop(context);
},
),
MaterialButton(
child: Text(
'About',
style: TextStyles.menuItem,
),
onPressed: () {
if (ResponsiveWidget.isSmallScreen(context)) Navigator.pop(context);
},
),
];
}
分别通过_buildTitle，_buildActions 实现左边的标题，右边的菜单按钮，里面有个细节：
大屏幕的返回_buildActions，小屏幕直接隐藏，这里你可能有疑问，为什么不用drawer实现菜单？drawer适合小屏幕实现，而大屏慕我们就要充分利用空间，尽可能的操作简单，一目了然。下面我们来实现，小屏幕的drawer，请看代码
///省略部分代码
Scaffold(
///省略部分代码
drawer: _buildDrawer(context),
),
_buildDrawer(BuildContext context) {
return ResponsiveWidget.isSmallScreen(context)
? Drawer(
child: ListView(
padding: const EdgeInsets.all(20),
children: _buildActions(context),
),
)
: null;
}
给Scaffold添加一个drawer组件，这里用ListView把刚才的_buildActions组件再放进来，原来是以横向展示，这次因为ListView默认是纵向，所以就是上下的展示方式，运行项目后，如图：
未展开的样子，标题右边的菜单消失
展开的样子，这就是我们要实现的小屏幕的样子。也符合手机的使用习惯。
有没有发现这个东东显示看不清楚，接下来我们改造它，可我没做过，我怎么查呢？我这里分享我的经验，首先你要明白这里的关键字是什么，当我鼠标停留在上面的时候提示如图
是一个navigation menu，所以我会在google里搜索，flutter scaffold drawer navigation menu，这么几个关键字，然后搜到的如图
，第一个是官方文档如何添加，第二个是custom drawer，自定义的，有可能讲到了如何修改，所以我就点进去寻找
看到没，还是很好找的哈，然后copy过来代码，发现它用的图不对，我们修改下，如图，这样是不是看着舒服了。
接下来就是给Scaffold的body填充内容了，先看实现的效果
Home页面黄色
About页蓝色
点击切换，具体实现请看下面代码
int _selectedDrawerIndex = 0;
///定义一个坐标值
/// 添加动态的body _getDrawerItemWidget
child: Scaffold(
body: _getDrawerItemWidget(_selectedDrawerIndex),
),
/// 省略部分代码
/// 根据一个index值，来确定加载哪个页面
_getDrawerItemWidget(int selectedDrawerIndex) {
switch(selectedDrawerIndex){
case 0:
return WidgetMenuHome();
break;
case 1:
return WidgetMenuAbout();
break;
}
}
/// 在_buildActions函数中的组件onPressed的时候调用，这样就可以更新UI
setState(() {
_selectedDrawerIndex = 0;
});
好了这期我们就先这样，学习到此结束，下期继续。
这次主要是对Scaffold的使用，以及如何构建不同平台的UI，确切说是不同宽度屏幕的构建，实现了大屏幕的Menu菜单，和小屏幕的Drawer菜单显示，而且没有考虑分包，下期将进行分包设计，并往页面里面填充内容，来构建我们的需求UI 实现一个Flutter Jetpack，并把之前做的Android Jetpack也挪过来。
项目开源链接
Android Jetpack WebSite
Flutter Jetpack WebSite
Flutter Jetpack Github Source Code
Android Jetpack Github Source Code
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK