使用ant-design-vue开发换肤功能

Posted 2023-03-16

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了使用ant-design-vue开发换肤功能相关的知识，希望对你有一定的参考价值。

参考技术A 1、安装 ant-design-vue
npm i ant-design-vue --save
2、在 main.js 中引入

3、安装 antd-theme-generator ， less 插件
npm i antd-theme-generator --save
npm i less --save
npm i less-loader --save
4、在 src 目录下新建 styles 文件夹，里面新建 index.less , variables.less 文件
variables.less 内容

index.less 文件为空
5、项目根目录下新建 color.js 文件

6、在 publish 文件夹下 index.html 文件中添加以下行，必须添加到 body 下

7、修改 package.json 的启动和打包指令

8、使用

原理：通过 window.less.modifyVars 方法，去动态的改变 less 变量。然后在调用 color.js ，在 pulish 中生成一个 color.less 文件，在 index.html 中重新引入一下，就实现了动态换肤功能。

ok，功能实现，结束。

Flutter悬浮窗组件之实现快捷换肤切换语言等开发调试功能模块

一、最近开发一个App具有黑白两个主题和切换语言的功能，所以在开发的时候一个页面总是要不断的去切换主题和语言来查看功能是否正常。

为了提高这个开发效率突然想到可以在应用上增加一个悬浮窗组件然后实现主题切换和语言切换的功能，这样在任意一个页面就可以快速的查看效果。不用来回切换到设置页面内去进行切换了。

二、实现的效果

悬浮窗组件也可以随意进行拖动，打开一个新的页面悬浮窗也始终是在最顶部的

这里稍微参考了一下滴滴的Dokit-Flutter悬浮窗实现

三、功能实现

创建一个DeveloperWidget继承StatefulWidget组件即可
要达到悬浮窗的效果这里需要使用系统的Overlay组件

具体实现代码

///省略部分代码
@override
Widget build(BuildContext context) 
  return Directionality(
    textDirection: TextDirection.ltr,
    child: Overlay(
      initialEntries: [
        OverlayEntry(
          builder: (c) 
            return widget.child;
          ,
        ),
        OverlayEntry(
          builder: (c) 
            return Positioned(
              left: _offset.dx,
              top: _offset.dy,
              child: Draggable(
                childWhenDragging: Container(),
                feedback: _developerWidget(),
                child: _developerWidget(),
                onDragEnd: (DraggableDetails detail) 
                  setState(() 
                    _offset = detail.offset;
                  );
                ,
              ),
            );
          ,
        ),
      ],
    ),
  );

///悬浮窗组件内具体自己要实现的功能组件，此处省略
Widget _developerWidget()

最外层使用了Directionality组件，这个是必须要的；因为我们这个组件最终是如下使用的，让MaterialApp成为这个DeveloperWidget组件的子元素

DeveloperWidget(
  child: MaterialApp(
    localizationsDelegates: const [
      GlobalMaterialLocalizations.delegate,
      GlobalCupertinoLocalizations.delegate,
      GlobalWidgetsLocalizations.delegate
    ],
    home: MainPage(),
  ),
);