搜索到
6
篇与
教程
的结果
-
【Flutter】如何自定义Flutter MaterialApp主题色(primarySwatch)？ 【Flutter】如何自定义Flutter MaterialApp主题色(primarySwatch)？问题在实际使用Flutter进行MaterialApp开发时，大都遇到一个问题，Flutter提供的可供选择的主题色(MaterialColor)很少，仅有如下几种：MaterialColor red MaterialColor pink MaterialColor purple MaterialColor deepPurple MaterialColor indigo MaterialColor blue MaterialColor lightBlue MaterialColor cyan MaterialColor teal MaterialColor green MaterialColor lightGreen MaterialColor lime MaterialColor yellow MaterialColor amber MaterialColor orange MaterialColor deepOrange MaterialColor brown MaterialColor grey MaterialColor blueGrey那么我们品牌有自己专属的品牌色或我有自己钟爱的颜色怎么自由设置主题色呢？研究通过material\colors.dart文件我们可以发现，其中关于MaterialColor的描述是这样的/// Defines a single color as well a color swatch with ten shades of the color. /// /// The color's shades are referred to by index. The greater the index, the /// darker the color. There are 10 valid indices: 50, 100, 200, ..., 900. /// The value of this color should the same the value of index 500 and [shade500]. /// /// See also: /// /// * [Colors], which defines all of the standard material colors. class MaterialColor extends ColorSwatch<int> { /// Creates a color swatch with a variety of shades. /// /// The `primary` argument should be the 32 bit ARGB value of one of the /// values in the swatch, as would be passed to the [Color.new] constructor /// for that same color, and as is exposed by [value]. (This is distinct from /// the specific index of the color in the swatch.) const MaterialColor(super.primary, super.swatch); /// The lightest shade. Color get shade50 => this[50]!; /// The second lightest shade. Color get shade100 => this[100]!; /// The third lightest shade. Color get shade200 => this[200]!; /// The fourth lightest shade. Color get shade300 => this[300]!; /// The fifth lightest shade. Color get shade400 => this[400]!; /// The default shade. Color get shade500 => this[500]!; /// The fourth darkest shade. Color get shade600 => this[600]!; /// The third darkest shade. Color get shade700 => this[700]!; /// The second darkest shade. Color get shade800 => this[800]!; /// The darkest shade. Color get shade900 => this[900]!; }通过官方给MaterialColor类的注释我们不难发现，要自定义MaterialColor我们需要传入一个颜色初始值primary及从亮到暗共十个级别的Map<int, Color> 这里有一张来自Flutter官方给出的Colors.blue的颜色卡 可以看出primary应该就是就是我们想要的主要颜色，同时也是shade500的值 下面我们只需要解决如何定义给出包含这10个级别的颜色即可解决办法目前公认的解决办法有如下几种1、函数生成自定义色板 MaterialColor createMaterialColor(Color color) { List strengths = <double>[.05]; Map<int, Color> swatch = {}; final int r = color.red, g = color.green, b = color.blue; for (int i = 1; i < 10; i++) { strengths.add(0.1 * i); } strengths.forEach((strength) { final double ds = 0.5 - strength; swatch[(strength * 1000).round()] = Color.fromRGBO( r + ((ds < 0 ? r : (255 - r)) * ds).round(), g + ((ds < 0 ? g : (255 - g)) * ds).round(), b + ((ds < 0 ? b : (255 - b)) * ds).round(), 1, ); }); return MaterialColor(color.value, swatch); }使用时仅需要在设置primarySwatch时调用该函数即可 示例primarySwatch: createMaterialColor(Colors.blueAccent) // 第一种 primarySwatch: createMaterialColor(Color(0xFF448AFF)) // 第二种，注意为8为16进制，首两位FF代表不透明2、改变透明值以生成不同亮度级别(不推荐)注意：并不推荐该种方法，该方法会导致组件变透明而不是颜色深浅示例MaterialColor myColor = MaterialColor(0xFF880E4F, color); Map<int, Color> color = { 50:Color.fromRGBO(4,131,184, .1), 100:Color.fromRGBO(4,131,184, .2), 200:Color.fromRGBO(4,131,184, .3), 300:Color.fromRGBO(4,131,184, .4), 400:Color.fromRGBO(4,131,184, .5), 500:Color.fromRGBO(4,131,184, .6), 600:Color.fromRGBO(4,131,184, .7), 700:Color.fromRGBO(4,131,184, .8), 800:Color.fromRGBO(4,131,184, .9), 900:Color.fromRGBO(4,131,184, 1), };使用时赋myColor给primarySwatch即可3、手动选择不同亮度级别颜色如果您对颜色有严格要求，可以手动自定义不同亮度颜色，这里不给出示例结语实战项目：https://www.wpbkj.com/archives/flutter_wpbkj_express.html该项目中自定义了主题色为Colors.blueAccent可供参考本文由WPBKJ原创，转载请声明 -
【Flutter】Android Studio (version 2022.1) flutter doctor报错Unable to find bundled Java version. 换新电脑之后在Android Studio官网安装最新版本的Android Studio之后运行flutter doctor报错Unable to find bundled Java version.产生原因Android Studio的文件夹构成发生改变，Flutter中配置未发生改变解决方法方案一(推荐)：将Andriod Studio安装路径下的jbr文件夹内的所有内容复制到jre文件夹中。 方案二(不推荐)：使用GitHub最新版本Flutter-masterFlutter官方表示将在GitHub-master通道中修复参考：https://github.com/flutter/flutter/issues/118790
-
【建站】Joe主题点赞和切换日夜间模式按钮动态效果不生效解决办法 这两天把旧版本的joe主题更新到了最新版的Joe 7.7.1，然后突然发现一个问题，文章页面中的点赞和页面右下角悬浮的日夜间模式切换开关什么也不显示，原因是JavaScript不生效，这里给出一种解决办法。一、文章点赞按钮不显示解决1、分析问题(1)、找到控制文章点赞按钮的JS文件Joe\assets\js\joe.post_page.js相应代码： /* 激活文章点赞功能 */ { let agreeArr = localStorage.getItem(encryption('agree')) ? JSON.parse(decrypt(localStorage.getItem(encryption('agree')))) : []; if (agreeArr.includes(cid)) $('.joe_detail__agree .icon-1').addClass('active'); else $('.joe_detail__agree .icon-2').addClass('active'); let _loading = false; $('.joe_detail__agree .icon').on('click', function () { if (_loading) return; _loading = true; agreeArr = localStorage.getItem(encryption('agree')) ? JSON.parse(decrypt(localStorage.getItem(encryption('agree')))) : []; let flag = agreeArr.includes(cid); $.ajax({ url: Joe.BASE_API, type: 'POST', dataType: 'json', data: { routeType: 'handle_agree', cid, type: flag ? 'disagree' : 'agree' }, success(res) { if (res.code !== 1) return; $('.joe_detail__agree .text').html(res.data.agree); if (flag) { const index = agreeArr.findIndex(_ => _ === cid); agreeArr.splice(index, 1); $('.joe_detail__agree .icon-1').removeClass('active'); $('.joe_detail__agree .icon-2').addClass('active'); $('.joe_detail__agree .icon').removeClass('active'); } else { agreeArr.push(cid); $('.joe_detail__agree .icon-2').removeClass('active'); $('.joe_detail__agree .icon-1').addClass('active'); $('.joe_detail__agree .icon').addClass('active'); } const name = encryption('agree'); const val = encryption(JSON.stringify(agreeArr)); localStorage.setItem(name, val); }, complete() { _loading = false; } }); }); }(2)、相应问题可以看到他是使用“$('.joe_detail__agree .icon-1')”这类来获取对象进行修改，有时并不起作用，所以我们换为id获取对象来进行修改2、解决方法(1)、为元素加上id属性图标元素所在文件：Joe\public\handle.php为icon、icon-1、icon-2分别加上"agreeIcon"、"noAgree"、"isAgree"的id属性 修改完成后如下：<div class="joe_detail__agree"> <div class="agree"> <div id="agreeIcon" class="icon"> <svg id="noAgree" class="icon-1" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="28" height="28"> <path d="M736 128c-65.952 0-128.576 25.024-176.384 70.464-4.576 4.32-28.672 28.736-47.328 47.68L464.96 199.04C417.12 153.216 354.272 128 288 128 146.848 128 32 242.848 32 384c0 82.432 41.184 144.288 76.48 182.496l316.896 320.128C450.464 911.68 478.304 928 512 928s61.568-16.32 86.752-41.504l316.736-320 2.208-2.464C955.904 516.384 992 471.392 992 384c0-141.152-114.848-256-256-256z" fill="#fff" /> </svg> <svg id="isAgree" class="icon-2" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="28" height="28"> <path d="M512 928c-28.928 0-57.92-12.672-86.624-41.376L106.272 564C68.064 516.352 32 471.328 32 384c0-141.152 114.848-256 256-256 53.088 0 104 16.096 147.296 46.592 14.432 10.176 17.92 30.144 7.712 44.608-10.176 14.432-30.08 17.92-44.608 7.712C366.016 204.064 327.808 192 288 192c-105.888 0-192 86.112-192 192 0 61.408 20.288 90.112 59.168 138.688l315.584 318.816C486.72 857.472 499.616 863.808 512 864c12.704.192 24.928-6.176 41.376-22.624l316.672-319.904C896.064 493.28 928 445.696 928 384c0-105.888-86.112-192-192-192-48.064 0-94.08 17.856-129.536 50.272l-134.08 134.112c-12.512 12.512-32.736 12.512-45.248 0s-12.512-32.736 0-45.248L562.24 196c48.32-44.192 109.664-68 173.76-68 141.152 0 256 114.848 256 256 0 82.368-41.152 144.288-75.68 181.696l-317.568 320.8C569.952 915.328 540.96 928 512 928z" fill="#fff" /> </svg> </div> <span class="text"><?php _getAgree($this) ?></span> </div> </div>(2)、修改JS文件找到上述的JS文件，修改其中"激活文章点赞功能"模块如下：使用id获取对象，并使用setAttribute修改svg的class值注意：修改完js文件后需要使用VSCode的minify 压缩成.min.js 文件并上传替换原文件见JoeREADME.md/* 激活文章点赞功能 */ { var agreeIcon1 = document.getElementById("noAgree"); var agreeIcon2 = document.getElementById("isAgree"); var agreeIcon = document.getElementById("agreeIcon"); let agreeArr = localStorage.getItem(encryption('agree')) ? JSON.parse(decrypt(localStorage.getItem(encryption('agree')))) : []; if (agreeArr.includes(cid)) { agreeIcon1.setAttribute("class","icon-1 active"); } else{ agreeIcon2.setAttribute("class","icon-2 active"); } let _loading = false; $('.joe_detail__agree .icon').on('click', function () { if (_loading) return; _loading = true; agreeArr = localStorage.getItem(encryption('agree')) ? JSON.parse(decrypt(localStorage.getItem(encryption('agree')))) : []; let flag = agreeArr.includes(cid); $.ajax({ url: Joe.BASE_API, type: 'POST', dataType: 'json', data: { routeType: 'handle_agree', cid, type: flag ? 'disagree' : 'agree' }, success(res) { if (res.code !== 1) return; $('.joe_detail__agree .text').html(res.data.agree); if (flag) { const index = agreeArr.findIndex(_ => _ === cid); agreeArr.splice(index, 1); agreeIcon1.setAttribute("class","icon-1"); agreeIcon2.setAttribute("class","icon-2 active"); agreeIcon.classList.remove('active'); } else { agreeArr.push(cid); agreeIcon2.setAttribute("class","icon-2"); agreeIcon1.setAttribute("class","icon-1 active"); agreeIcon.className += " active"; } const name = encryption('agree'); const val = encryption(JSON.stringify(agreeArr)); localStorage.setItem(name, val); }, complete() { _loading = false; } }); }); }二、日夜间切换按钮不显示解决1、分析问题该问题与上述文章点赞按钮相同(1)、找到控制日夜间切换按钮的JS文件Joe\assets\js\joe.global.js相应代码： /* 初始化昼夜模式 */ { if (localStorage.getItem("data-night")) { $(".joe_action_item.mode .icon-1").addClass("active"); $(".joe_action_item.mode .icon-2").removeClass("active"); } else { $("html").removeAttr("data-night"); $(".joe_action_item.mode .icon-1").removeClass("active"); $(".joe_action_item.mode .icon-2").addClass("active"); } $(".joe_action_item.mode").on("click", () => { if (localStorage.getItem("data-night")) { $(".joe_action_item.mode .icon-1").removeClass("active"); $(".joe_action_item.mode .icon-2").addClass("active"); $("html").removeAttr("data-night"); localStorage.removeItem("data-night"); } else { $(".joe_action_item.mode .icon-1").addClass("active"); $(".joe_action_item.mode .icon-2").removeClass("active"); $("html").attr("data-night", "night"); localStorage.setItem("data-night", "night"); } }); }(2)、相应问题与文章点赞按钮问题相同2、解决方法(1)、为元素加上id属性图标元素所在文件：Joe\public\footer.php为icon-1、icon-2分别加上"nightIcon"、"dayIcon"的id属性 修改完成后如下：<svg id="nightIcon" class="icon-1" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="25" height="25"> <path d="M587.264 104.96c33.28 57.856 52.224 124.928 52.224 196.608 0 218.112-176.128 394.752-393.728 394.752-29.696 0-58.368-3.584-86.528-9.728C223.744 832.512 369.152 934.4 538.624 934.4c229.376 0 414.72-186.368 414.72-416.256 1.024-212.992-159.744-389.12-366.08-413.184z" /> <path d="M340.48 567.808l-23.552-70.144-70.144-23.552 70.144-23.552 23.552-70.144 23.552 70.144 70.144 23.552-70.144 23.552-23.552 70.144zM168.96 361.472l-30.208-91.136-91.648-30.208 91.136-30.208 30.72-91.648 30.208 91.136 91.136 30.208-91.136 30.208-30.208 91.648z" /> </svg> <svg id="dayIcon" class="icon-2" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="25" height="25"> <path d="M234.24 512a277.76 277.76 0 1 0 555.52 0 277.76 277.76 0 1 0-555.52 0zM512 187.733a42.667 42.667 0 0 1-42.667-42.666v-102.4a42.667 42.667 0 0 1 85.334 0v102.826A42.667 42.667 0 0 1 512 187.733zm-258.987 107.52a42.667 42.667 0 0 1-29.866-12.373l-72.96-73.387a42.667 42.667 0 0 1 59.306-59.306l73.387 72.96a42.667 42.667 0 0 1 0 59.733 42.667 42.667 0 0 1-29.867 12.373zm-107.52 259.414H42.667a42.667 42.667 0 0 1 0-85.334h102.826a42.667 42.667 0 0 1 0 85.334zm34.134 331.946a42.667 42.667 0 0 1-29.44-72.106l72.96-73.387a42.667 42.667 0 0 1 59.733 59.733l-73.387 73.387a42.667 42.667 0 0 1-29.866 12.373zM512 1024a42.667 42.667 0 0 1-42.667-42.667V878.507a42.667 42.667 0 0 1 85.334 0v102.826A42.667 42.667 0 0 1 512 1024zm332.373-137.387a42.667 42.667 0 0 1-29.866-12.373l-73.387-73.387a42.667 42.667 0 0 1 0-59.733 42.667 42.667 0 0 1 59.733 0l72.96 73.387a42.667 42.667 0 0 1-29.44 72.106zm136.96-331.946H878.507a42.667 42.667 0 1 1 0-85.334h102.826a42.667 42.667 0 0 1 0 85.334zM770.987 295.253a42.667 42.667 0 0 1-29.867-12.373 42.667 42.667 0 0 1 0-59.733l73.387-72.96a42.667 42.667 0 1 1 59.306 59.306l-72.96 73.387a42.667 42.667 0 0 1-29.866 12.373z" /> </svg>(2)、修改JS文件找到上述的JS文件，修改其中"初始化昼夜模式"模块如下：使用id获取对象，并使用setAttribute修改svg的class值注意：修改完js文件后需要使用VSCode的minify 压缩成.min.js 文件并上传替换原文件见Joe\README.md/* 初始化昼夜模式 */ { var dayIcon = document.getElementById("dayIcon"); var nightIcon = document.getElementById("nightIcon"); if (localStorage.getItem("data-night")) { nightIcon.setAttribute("class","icon-1 active"); dayIcon.setAttribute("class","icon-2"); } else { $("html").removeAttr("data-night"); nightIcon.setAttribute("class","icon-1"); dayIcon.setAttribute("class","icon-2 active"); } $(".joe_action_item.mode").on("click", () => { if (localStorage.getItem("data-night")) { nightIcon.setAttribute("class","icon-1"); dayIcon.setAttribute("class","icon-2 active"); $("html").removeAttr("data-night"); localStorage.removeItem("data-night"); } else { nightIcon.setAttribute("class","icon-1 active"); dayIcon.setAttribute("class","icon-2"); $("html").attr("data-night", "night"); localStorage.setItem("data-night", "night"); } }); }三、总结至此问题全部解决，相关使用minify 压缩成.min.js后的js文件可从如下链接下载使用，除了js别忘了修改PHP中的id属性https://www.wpbkj.com/usr/themes/Joe/assets/js/joe.post_page.min.jshttps://www.wpbkj.com/usr/themes/Joe/assets/js/joe.global.min.js
-
【Flutter】在Android Studio安装Android SDK Command-line Tools后Flutter Doctor仍报错 今天运行Flutter Doctor时发现如下报错[✗] Android toolchain - develop for Android devices ✗ cmdline-tools component is missing Run `path/to/sdkmanager --install "cmdline-tools;latest"` See https://developer.android.com/studio/command-line for more details.可以看到提示SDK的cmdline-tools未安装，按理说去Android Studio的设置中安装即可，但安装后仍报错，原因是我改过一次SDK的路径，将默认路径改到了F盘中。解决办法：改变Flutter Config设置 flutter config --android-sdk "F:\android\sdk"将Flutter Config中的Android SDK路径改为自己的即可
-
【PHP学习】-SESSION本地存储小谈 本项目演示地址：SESSION存储测试地址演示文件共有3个：session.php（给session赋值并本地存储）2.php（session跨页面调取测试） del.php（删除特定session）演示文件可前往GITHUB获取：WPBKJ博客PHP学习仓库GITEE国内克隆版：WPBKJ博客PHP学习仓库-GITEE首先介绍一下SESSION：session变量可以让我们继续使用以前的页面数据，好像服务器已经记住了或者说跟踪了用户。因此，可以在PHP程序文件之间传递数据（数值、字符串、数组和对象）。当用户在应用程序的页间进行跳转时，session变量不会释放（在设定的session存活期时间内，一般为180分钟，可自行在php.ini设定session.cache_expire的值）。由此可见，session变量存储的是个别浏览器端专用的数据。当用户浏览Web站点时，使用session变量可以为每一个用户保存指定的数据。任何存储在用户session变量中的数据可以在用户调用下一个页面时取得。实际应用中，在身份认证、操作监控、客户消费偏好跟踪等许多需要持续会话的场合，应用广泛。 Session的工作机制是：为每个访客创建一个唯一的id (UID)，并基于这个UID来存储变量。UID存储在cookie 中，或者通过URL进行传导。下面我们根据演示实例给大家大概示范一下session的基本功能本实例将首先使用POST为session赋值并存储，之后演示session跨页面调取在这之前，你要先了解一些相关知识使用session前一定要session_start()启动session；储存session：$_SESSION["name"]="King";//数组操作；销毁session：unset($_SESSION["name"]);//销毁一个；session_destroy()和unset($_SESSION);//销毁所有的session检测一个变量是否被设置：isset($变量名)PHP if...else...语句下面开始介绍演示文件1、session.php进入页面这是一个开始页面，本页面可以使用POST为$_SESSION["thing"]赋值，下面代码注释中有源代码：<?php session_start();//开始session $_SESSION["thing"]=&$_POST["sessions"];//将POST中的变量赋值给SESSION变量：thing ?> <html> <head> <meta charset="utf-8"> <title>SESSION存储测试-WPBKJ博客</title> </head> <body> <h3>本测试地址由WPBKJ博客原创，本测试介绍地址：<a href="https://www.wpbkj.com/achives/phpsession.html">https://www.wpbkj.com/achives/phpsession.html</a></h3> <form method="post" action=""><!--设置POST--> <input type="text" name="sessions"/> <input type="submit" value="存储session"/> </form> <?php if(isset($_SESSION["thing"])) { echo $_SESSION["thing"]; } else { echo "您还未设置session,请在上面输入您想存储的session"; } ?> <br> 您可在为SESSION赋值前进入以下页面，对比赋值后不同。<br> <a href="2.php">>跨页面检索session测试</a><br> <a href="del.php">>删除此session</a> </body> </html>2、2.php进入页面本页面提供session跨页面存储测试，在第一个页面设置session后将在此页面无需再次设置session即可调用源代码：<?php session_start();//开始session ?> <html> <head> <meta charset="utf-8"> <title>跨页面检索session测试-WPBKJ博客</title> </head> <body> <?php if (isset($_SESSION["thing"]))//如果session被设置则返回session数值，否者输出else中的信息 { echo $_SESSION["thing"]; } else{ echo "您还没有设置session哦，点击下面返回为session赋值吧"; } ?> <br> <a href="session.php">>返回赋值页面</a> <br> <a href="del.php">>删除此session</a> </body> </html>3、del.php进入页面本页面将删除之前设置的session（如果设置了的话，没有设置将输出其他内容）源代码：<?php session_start();//开始session ?> <!doctype html> <html> <head> <meta charset="utf-8"> <title>删除session测试-WPBKJ博客</title> </head> <body> <?php if (isset($_SESSION["thing"]))//如果session被设置就删除它，如果没有返回else中的信息 { unset($_SESSION["thing"]); echo "session删除成功"; } else { echo "您还没有设置session"; } ?><br> 删除session之后点一下下面的“>跨页面检索session测试页面”，看出现了什么变化？ <br> <a href="session.php">>返回赋值页面</a> <br> <a href="2.php">>跨页面检索session测试页面</a> </body> </html>本次PHP session学习就到这里，全原创，转载注明出处。
-
