用Flutter实现一个精美的点单功能

时间  2020-05-31
标签 flutter 实现 一个 精美 功能 繁體版
原文   原文链接

前一段时间项目集成了Flutter作了许多的功能模块，再加上好久没有文章产出，因此打算写这么一篇文章来总结和记录Flutter开发中的一些问题

Demo地址：github.com/weibindev/f…git

ps:demo中的数据都从assets\data\文件夹下的json文件读取，因此并无涉及到网络请求封装，项目架构等相关知识，这个demo偏注重于点单结构的实现。github

整体的效果以下所示：json

点单.gif

总体结构分析

首页的店铺入口没什么好说的，它主要是咱们点单功能的入口和店铺购物车商品数的展现。bash

下面咱们主要来分析下点单界面的结构组成。markdown

点单界面结构

根据上面这张图，按照数字标识框出的地方分析以下：网络

  • 1：顶部的搜索框，至关于Android中的statusBar+toolbar
  • 2：左侧一级商品分类栏目，部分栏目会有二级分类的状况出现
  • 3：二级商品分类栏目，是对一个大类商品作进一步划分
  • 4：一级或二级分类的商品列表，点击单个商品条目进入商品的详情页
  • 5：底部购物车，它位于整个点单界面的最顶层，这个界面的全部功能均不会遮挡住购物车(具备overlays属性的控件除外)

其中1，2，3，4能够看做一个总体，5能够看做一个总体。架构

底部购物车实现

关于底部购物车，我刚开始的实现思路是用Overlay去作，源码中对它的描述以下app

/// A [Stack] of entries that can be managed independently.
///
/// Overlays let independent child widgets "float" visual elements on top of
/// other widgets by inserting them into the overlay's [Stack]. The overlay lets
/// each of these widgets manage their participation in the overlay using
/// [OverlayEntry] objects.
///
/// Although you can create an [Overlay] directly, it's most common to use the
/// overlay created by the [Navigator] in a [WidgetsApp] or a [MaterialApp]. The
/// navigator uses its overlay to manage the visual appearance of its routes.
///
/// See also:
///
/// * [OverlayEntry].
/// * [OverlayState].
/// * [WidgetsApp].
/// * [MaterialApp].
class Overlay extends StatefulWidget {
复制代码

意思是Overlay是一个Stack组件，能够将OverlayEntry插入到Overlay中，使其独立的child窗口悬浮于其它组件之上，利用这个特性咱们能够用Overlay将底部购物车组件包裹起来，覆盖在其它的组件之上。less

然而实际使用过程当中问题多多，须要本身精准的控制好Overlay包裹的悬浮控件的显隐等，否则人家都退出这个界面了，我们的购物车还搁下面显示着。我的认为这玩意仍是更适合Popupindow和全局自定义Dialog之类的。ide

那么Flutter中有没有方便管理一堆子组件的组件呢？

在编写Flutter应用的时候，咱们程序的入口是经过main()函数的runApp(MyApp())执行的，MyApp一般会build出一个MaterialApp组件

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: '我要点东西',
      home: HomePage(),
    );
  }
}
复制代码

对于不一样界面之间的路由咱们会交由Navigator管理，好比: Navigator.push 和 Navigator.pop等。为何MaterialApp可以对Navigator的操做做出感应呢？

MaterialApp的构造方法中有这么一个字段navigatorKey

class MaterialApp extends StatefulWidget {

  final GlobalKey<NavigatorState> navigatorKey;
    
  ///省略一些代码
}

class _MaterialAppState extends State<MaterialApp> {
    
  @override
  Widget build(BuildContext context) {
    Widget result = WidgetsApp(
      key: GlobalObjectKey(this),
      navigatorKey: widget.navigatorKey,
      navigatorObservers: _navigatorObservers,
      pageRouteBuilder: <T>(RouteSettings settings, WidgetBuilder builder) {
        return MaterialPageRoute<T>(settings: settings, builder: builder);
      },
  ///省略一些代码
  }
}
复制代码

往深刻的去看它会传递给WidgetsApp构造方法中的navigatorKey，WidgetsApp的navigatorKey在组件初始化时会默认的建立一个全局的NavigatorState，而后对build(BuildContext context)中建立的Navigator进行状态管理。

class _WidgetsAppState extends State<WidgetsApp> with WidgetsBindingObserver {
    @override
    void initState() {
        super.initState();
        _updateNavigator();
        _locale = _resolveLocales(WidgetsBinding.instance.window.locales, widget.supportedLocales);
        WidgetsBinding.instance.addObserver(this);
    }
  
    // NAVIGATOR
    GlobalKey<NavigatorState> _navigator;

    void _updateNavigator() {
        //MaterialApp中不指定navigatorKey会默认初始化一个全局的NavigatorState
        _navigator = widget.navigatorKey ?? GlobalObjectKey<NavigatorState>(this);
    }
    
    @override
  Widget build(BuildContext context) {
    //这里会构建出一个Navigator组件，并把上面的navigatorKey写进去，这样就作到了Navigator的栈操做
    Widget navigator;
    if (_navigator != null) {
      navigator = Navigator(
        key: _navigator,
        // If window.defaultRouteName isn't '/', we should assume it was set // intentionally via `setInitialRoute`, and should override whatever // is in [widget.initialRoute]. initialRoute: WidgetsBinding.instance.window.defaultRouteName != Navigator.defaultRouteName ? WidgetsBinding.instance.window.defaultRouteName : widget.initialRoute ?? WidgetsBinding.instance.window.defaultRouteName, onGenerateRoute: _onGenerateRoute, onGenerateInitialRoutes: widget.onGenerateInitialRoutes == null ? Navigator.defaultGenerateInitialRoutes : (NavigatorState navigator, String initialRouteName) { return widget.onGenerateInitialRoutes(initialRouteName); }, onUnknownRoute: _onUnknownRoute, observers: widget.navigatorObservers, ); } } } 复制代码

到这里基本上能够想到该如何实现底部购物车的功能了。

是的，咱们能够在点单界面自定义一个Navigator来管理搜索商品、商品详情、商品购物车列表等路由的跳转，其它的交由咱们MaterialApp的Navigator控制。

下面是功能代码大体实现：

class OrderPage extends StatefulWidget {
  @override
  _OrderPageState createState() => _OrderPageState();
}

class _OrderPageState extends State<OrderPage> {

  ///管理点单功能Navigator的key
  GlobalKey<NavigatorState> navigatorKey = GlobalKey();

  @override
  Widget build(BuildContext context) {
    return WillPopScope(
        onWillPop: () {
          //监听系统返回键，先对自定义Navigator里的路由作出栈处理，最后关闭OrderPage
          navigatorKey.currentState.maybePop().then((value) {
            if (!value) {
              NavigatorUtils.goBack(context);
            }
          });
          return Future.value(false);
        },
        child: Stack(
          children: <Widget>[
            Navigator(
              key: navigatorKey,
              onGenerateRoute: (settings) {
                if (settings.name == '/') {
                  return PageRouteBuilder(
                    opaque: false,
                    pageBuilder:
                        (childContext, animation, secondaryAnimation) =>
                            //构建内容层
                            _buildContent(childContext),
                    transitionsBuilder:
                        (context, animation, secondaryAnimation, child) =>
                            FadeTransition(opacity: animation, child: child),
                    transitionDuration: Duration(milliseconds: 300),
                  );
                }
                return null;
              },
            ),
            Positioned(
              bottom: 0,
              right: 0,
              left: 0,
              //购物车组件，位于底部
              child: ShopCart(),
            ),
            //添加商品进购物车的小球动画
            ThrowBallAnim(),
          ],
        ),
      );
  }
}


复制代码

页面过渡动画Hero的使用

效果能够看最开始的那一张GIF。

Hero的使用很是的简单，须要关联的两个组件用Hero组件包裹，并指定相同的tag参数,代码以下：

///列表item
InkWell(
      child: ClipRRect(
        borderRadius: BorderRadius.circular(4),
        child: Hero(
          tag: widget.data,
          child: LoadImage(
            '${widget.data.img}',
            width: 81.0,
            height: 81.0,
            fit: BoxFit.fitHeight,
          ),
        ),
      ),
      onTap: () {
        Navigator.of(context).push(MaterialPageRoute(
            builder: (context) => GoodsDetailsPage(data: widget.data)));
      },
    );


复制代码
///详情
 Hero(
    tag: tag,
    child: LoadImage(
        imageUrl,
        width: double.infinity,
        height: 300,
        fit: BoxFit.cover,
        ),
    )

复制代码

是否是以为这样写好就完事了呢，Hero的效果就会出来了？在正常状况下是会有效果，可是在咱们这里却没有任何效果，就跟普通的路由跳转同样样的，这是为啥呢？

咱们在MaterialApp中的是有效果的，自定义的Navigator的却没效果，那么确定是MaterialApp的Navigator作了什么配置。

仍是经过MaterialApp的源码能够发现，在其初始化的时候会new一个HeroController并在构造参数navigatorObservers中添加进去

class _MaterialAppState extends State<MaterialApp> {
  HeroController _heroController;

  @override
  void initState() {
    super.initState();
    _heroController = HeroController(createRectTween: _createRectTween);
    _updateNavigator();
  }

  @override
  void didUpdateWidget(MaterialApp oldWidget) {
    super.didUpdateWidget(oldWidget);
    if (widget.navigatorKey != oldWidget.navigatorKey) {
      // If the Navigator changes, we have to create a new observer, because the
      // old Navigator won't be disposed (and thus won't unregister with its
      // observers) until after the new one has been created (because the
      // Navigator has a GlobalKey).
      _heroController = HeroController(createRectTween: _createRectTween);
    }
    _updateNavigator();
  }

  List<NavigatorObserver> _navigatorObservers;

  void _updateNavigator() {
    if (widget.home != null ||
        widget.routes.isNotEmpty ||
        widget.onGenerateRoute != null ||
        widget.onUnknownRoute != null) {
      _navigatorObservers = List<NavigatorObserver>.from(widget.navigatorObservers)
        ..add(_heroController);
    } else {
      _navigatorObservers = const <NavigatorObserver>[];
    }
  }

    ///.... 
}
复制代码

最终是添加进WidgetsApp构建的Navigator构造参数observers里

navigator = Navigator(
        key: _navigator,
        // If window.defaultRouteName isn't '/', we should assume it was set
        // intentionally via `setInitialRoute`, and should override whatever
        // is in [widget.initialRoute].
        initialRoute: WidgetsBinding.instance.window.defaultRouteName != Navigator.defaultRouteName
            ? WidgetsBinding.instance.window.defaultRouteName
            : widget.initialRoute ?? WidgetsBinding.instance.window.defaultRouteName,
        onGenerateRoute: _onGenerateRoute,
        onGenerateInitialRoutes: widget.onGenerateInitialRoutes == null
          ? Navigator.defaultGenerateInitialRoutes
          : (NavigatorState navigator, String initialRouteName) {
            return widget.onGenerateInitialRoutes(initialRouteName);
          },
        onUnknownRoute: _onUnknownRoute,
        //MaterialApp的HeroController会添加进去
        observers: widget.navigatorObservers,
      );
复制代码

因此咱们只要同理在本身定义的Navigator里添加进去便可：

Stack(
          children: <Widget>[
            Navigator(
              key: navigatorKey,
                //自定Navigator使用不了Hero的解决方案
              observers: [HeroController()],
              onGenerateRoute: (settings) {
                if (settings.name == '/') {
                  return PageRouteBuilder(
                    opaque: false,
                    pageBuilder:
                        (childContext, animation, secondaryAnimation) =>
                            _buildContent(childContext),
                    transitionsBuilder:
                        (context, animation, secondaryAnimation, child) =>
                            FadeTransition(opacity: animation, child: child),
                    transitionDuration: Duration(milliseconds: 300),
                  );
                }
                return null;
              },
            ),
            Positioned(
              bottom: 0,
              right: 0,
              left: 0,
              child: ShopCart(),
            ),
            //添加商品进购物车的小球动画
            ThrowBallAnim(),
          ],
        )
复制代码

高斯模糊的实现

底部购物车的灰色区域使用到了高斯模糊的效果

该效果在Flutter中的控件是BackdropFilter,用法以下：

BackdropFilter(
    filter: ImageFilter.blur(sigmaX, sigmaY),
    child: ...)
复制代码

不过使用的时候也有小坑,若是没有进行剪辑，那么高斯模糊的效果会扩散至全屏，正确的写法应该以下：

ClipRect(
    BackdropFilter(
        filter: ImageFilter.blur(sigmaX, sigmaY),
        child: ...)
)
复制代码

ps：其实在BackdropFilter的源码中有更详细的说明，建议你们去看看

商品栏目分类的实现

商品栏目的分类说的笼统点就是1、二级菜单对PageView的page切换处理。

能够把上图右侧框出的部分当作一个PageView，左侧tab的点击就是对PageView进行的一个竖直方向的page切换操做，对应的tab下没有二级tab的话，那么当前page展现的就是一个ListView。

那若是有二级tab的话，当前page展现的是TabBar+PageView联动，这个PageView的方向是横向水平的

若是上述的描述还不是很懂的话，不要紧，我准备了一张总的结构图，清晰的描述了它们之间的关系：

还有一点须要注意的地方，咱们不但愿每次切换tab的时候,Widgets都会从新加载一次，这样对用户的体验是极差的，咱们要对已经加载过的page保持它的一个页面状态。这一点使用AutomaticKeepAliveClientMixin能够作到。

class SortRightPage extends StatefulWidget {
  final int parentId;
  final List<Sort> data;

  SortRightPage(
      {Key key,
      this.parentId,
      this.data})
      : super(key: key);

  @override
  _SortRightPageState createState() => _SortRightPageState();
}

class _SortRightPageState extends State<SortRightPage>
    with AutomaticKeepAliveClientMixin {
  @override
  Widget build(BuildContext context) {
    super.build(context);
    if (widget.data == null || widget.data.isEmpty) {
      if (widget.parentId == -1) {
        //套餐Page
        return DiscountPage();
      } else {
        //商品列表
        return SubItemPage(
          key: Key('subItem${widget.parentId}'),
          id: widget.parentId
        );
      }
    } else {
      //二级分类
      return SubListPage(
        key: Key('subList${widget.parentId}'),
        data: widget.data
      );
    }
  }

  @override
  bool get wantKeepAlive => true;
}

复制代码

结束

好了,文章到这里七七八八的差很少了，其余更加细节的地方你们能够去Github上看我写的demo，里面对用户交互的处理仍是蛮稳当的，但愿可以帮助到你们。

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程