Flutter Web 网站之主页框架搭建

2022-12-14 399

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 上期主要完成环境的搭建和部署，最终在jetpack.net.cn地址上呈现，这期我们就开始搭建主页，构建一个可以兼容三端（Android、Ios、Web）的主页。

往期

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也挪过来。