顶

菜鸟入门，各位大佬轻喷，如有谬误之处欢迎讨论建议，也欢迎各位道友与我同行

"不积跬步，无以至千里；不积小流，无以成江海"

继续

续接上篇文章，我们实现了一个简单的登陆界面，但是我们的表单提示，例如用户名等，是用的文字在按钮上方提示的

那我们如何去实现一个提示框用于提示呢？然后再自动聚焦到输入框中呢？

提示框的实现

// 是否显示弹窗的标识
@State private var showAlert:Bool = false;

// 在登陆按钮之后放置弹窗
Button("登陆"){
    // 切换要显示Alert
    showAlert.toggle();
    // 省略一部分操作。。。
}.alert(isPresented: $showAlert){ // 这里 isPresented 绑定 showAlert变量
    Alert(
        title: Text("提示"), // 顶部的标题
        message: Text(res), // 弹窗的内容，需要是一个Text，调用了我们之前定义的提示文本
        primaryButton: .default(Text("取消")){// 第一个按钮是默认类型样式，显示取消
            // 第一个按钮点击后的操作
        },
        secondaryButton: .destructive(Text("确定")){
        
        }
    )
}

以上的代码运行后得到如下结果

在这里插入图片描述

focus 到TextField

以上的弹出框提示已经解决，那么接下来需要实现的是弹出之后哪一个字段没填，就让它自动聚焦，让用户可以直接填写那个字段 添加如下的代码

// 是否聚焦到用户名字段，注意@符号后面跟的是 FocusState，不然用到focused里面会报错，并且不能设置默认值
@FocusState private var focusUser:Bool;
HStack{
    Text("用户名")
    Spacer()
    TextField("请输入用户名",text:$userName)
        .multilineTextAlignment(.center)
        // 给用户名字段的 focused 绑定 focusUser 变量
        .focused($focusUser)
    }.padding(.all)
}
/// ... 省略部分代码
Button("登陆"){
    // 切换要显示Alert
    showAlert.toggle();
    if(userName == ""){
        // 如果没填 userName 那么切换 focusUser 的值
        focusUser.toggle()
    }
    // 省略一部分操作。。。
}
// 。。。 省略Alert部分

此处的代码实现了，如果在点击登陆按钮后用户名没有填，自动聚焦到用户名字段

在本页面中，共有三个字段，可以定义三个变量的形式来进行判定聚焦

但是如果有很多个字段的话就不合适了，我们可以使用枚举的方式来进行定义

以下贴出本页面完整的代码

import SwiftUI

struct ContentView: View {
    // 用户名
    @State private var userName:String = "";
    // 密码
    @State private var passWord:String = "";
    // 验证码
    @State private var code:String = "";
    // 提示语
    @State private var res:String = "请输入。。。";
    // 提示语的颜色，color类型
    @State private var color:Color = .red;
    
    // 是否显示弹窗标识
    @State private var showAlert:Bool = false;
    
    // 聚焦到哪一个字段？
    @FocusState private var focus:FocusField?;
    
    // 定义一个 Hashable 的枚举，因为 focused 的第二个参数需要一个hashable的参数
    enum FocusField:Hashable{
        case name;
        case password;
        case code;
        case clear;
    };
    
    var body: some View {
        // 整体纵向布局
        VStack {
            // 页面标题，加粗，标题字体
            Text("登陆界面").fontWeight(.bold).font(.title)
            // 分隔占位，有点类似html中flex的flex:1，具体怎么用之后再看
            Spacer()
            // 一个横向布局，表单项名称-分隔占位-以及表单项
            // 给一个 .all 的 padding，不然不好看
            HStack{
                Text("用户名")
                Spacer()
                TextField("请输入用户名",text:$userName)
                    .multilineTextAlignment(.center)
                    // focused 绑定 focus变量，当该变量为 .name 时
                    .focused($focus,equals: .name)
            }.padding(.all)
            
            HStack{
                Text("密码")
                Spacer()
                // secure field 跟 TextField基本类似，只是隐藏输入的内容
                SecureField("请输入密码",text:$passWord)
                    .multilineTextAlignment(.center)
                    .focused($focus, equals: .password)
            }.padding(.all)
            
            HStack{
                Text("验证码")
                Spacer()
                TextField("请输入验证码",text:$code)
                    .multilineTextAlignment(.center)
                    .focused($focus, equals: .code)
            }.padding(.all)
            
            Spacer()
            // 提示语和button在一起
            Text(res).foregroundColor(color)
            
            Button("登陆"){
                showAlert.toggle();
                color = .red
                // button 的点击事件action，做一个简单的判断
                // 修改 res 的名称，以及res的颜色
                if(userName == ""){
                    res = "请输入用户名！";
                    return ;
                }
                if(passWord == ""){
                    res = "请输入密码！"
                    return ;
                }
                if(code == ""){
                    res = "请输入验证码";
                    return ;
                }
                color = .green;
                res = "登陆成功"
                // 清空表单数据
                userName = "";
                passWord = "";
                code = "";
            }.buttonStyle(.bordered)
            .alert(isPresented: $showAlert){
                Alert(
                    title: Text("提示"),
                    message: Text(res),
                    primaryButton: .default(Text("取消")),
                    secondaryButton: .destructive(Text("确定")){
                        if(res == "请输入用户名！"){
                            // 没有用户名
                            focus = .name
                        }
                        if(res == "请输入密码！"){
                            focus = .password
                        }
                        if(res == "请输入验证码！"){
                            focus = .code
                        }
                        if(res == "登陆成功" || res == "请输入。。。"){
                            focus = .clear
                        }
                    }
                )
            }
        }
        .padding()
    }
}
struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

运行得到以下的结果

在这里插入图片描述

总结

1. TextField 的 .focused($focus, .name) 使用
2. enum 的基本使用
3. Alert 的基本使用

如今的这个纷杂世界里，影响我们视觉感官的因素太多了，于是乎才有了“聚焦”一说。作为人们与世界交流的重要窗口，网络浏览器也不例外。这不，微软基于Chromium的Microsoft Edge浏览器，就为我们提供了一种“聚焦模式”（Focus Mode），它能够让我们专注某个网页的核心内容的阅读，而屏蔽掉一切与此无关的弹出或闲杂信息。

类似的“聚焦模式”（Focus Mode）新功能在Chrome中也即将出现。由于Windows 10将摒弃以EdgeHTML为核心的Edge浏览器，过渡到基于Chromium的Microsoft Edge，而基于Chromium的Microsoft Edge兼容Chromium内核浏览器的许多丰富功能，如大量的扩展插件，因此新的Edge会给用户带来极大的方便和广阔的使用空间。

首先下载并运行基于Chromium的Microsoft Edge浏览器测试版。注意，它与当前Windows 10中自带的Edge各行其道，运行不会有冲突，生成的图标也不会相互覆盖。

在地址栏中键入以下命令：

edge://flags

在搜索结果中查找以下标志（图1）：

Focus Mode

我们也可以将以下URL复制并粘贴到Microsoft Edge的地址栏中直达目标（图2）：

edge://flags/#focus-mode

在Microsoft Edge中，聚焦模式当前设置为Default，默认情况下该功能暂不启用。单击该下拉菜单并选择Enabled启用。点击Relaunch重新启动浏览器，才能应用更改（图3）。

下次启动浏览器时，在网页选项卡的右键菜单中，能看到一个Focus this tab新选项（图4）。这将允许我们在聚焦模式下启动网页，从而在窗口中不使用任何其他选项的情况下读取内容。这对专注于网上阅读文章的用户，或浏览那些老是弹出广告或无关信息的网页，将起到非常好的“净化”作用。

若需要返回到原来的网页，只需在聚焦窗口的右键菜单中选择Open browser window即可（图5）。

久没参与魔方的发布工作了，今天提笔，有种莫名的生疏和惶恐，从下午四点半一直坐到现在，3个小时，删删写写。千言无语，千头万绪，千百般滋味涌上心头，真的很怀念那些年每个周五定期一更的日子，简单而快乐。

2006年12月Vista优化大师发布第一个测试版，再到2009年9月发布魔方0.1，时光荏苒，便过去了9年。很多当初最早的那批朋友，现在都成了老友，有时候一觉醒来，发现软媒的那个最老用户群里的消息闪烁，由衷的开心，没有什么比熟悉的感觉更有韵味。

产品部的魔方一哥过来催文了，尽管他说理解我的心情啊什么的，但是为了保持一贯的不加班作风，我得直入主题了——

魔方6.16正式版现在发布，“忍不住”还是让产品组加了新功能，本来说好的要克制加新功能的冲动，重点大幅改进清理等原有常用功能的。

这次忍不住要加的新功能，大家在标题里面已经看到了，就是一键提取微软官方的精美聚焦壁纸（美化大师顶部加入了“聚焦壁纸”）。熟悉微软的朋友都知道，Win10TH2开始系统增加了“Windows 聚焦”壁纸，大家在系统设置的“个性化”-“锁屏设置”里面可以设置锁屏的背景壁纸为“Windows 聚焦”，如下图所示：

这些微软官方提供的锁屏壁纸还是非常精美的，会自动的下载并切换，于是魔方便加入了提取功能，需要注意的是，这儿的提取，是提取的本机已经下载的，如果您之前没有开启过Windows聚焦功能，是抓不到的。这个抓取功能更方便的是让大家随时保存最新的。那过去的好看聚焦壁纸怎么办？别着急，我们在软件界面提供了所有Win10历史聚焦壁纸下载大全的链接，很贴心的说。

当然，这次魔方还有其他的有爱更新，例如清理大师的重复文件查找支持了批量选择和删除操作，例如设置大师中加入了让资源管理器关闭mkv文件的预览以防止卡顿，软媒雷达、软媒时间、WiFi助手、软媒压缩等都有界面和功能修复改进。

具体更新内容的细节，请看下面的更新历史吧！

PS：按照惯例，软媒魔方将在发布数十分钟后才放开自动升级。

一、软媒魔方更新历史

软媒魔方 6.1.6.0 正式版 - 2015年12月17日

魔方主程序 6.1.6.0：

新增：应用大全 - 增加旗鱼浏览器PC版入口

软媒美化大师 3.6.9.0：

新增：针对Win10 TH2增加Windows聚焦壁纸一键提取功能

软媒时间 3.1.3.0：

修正：界面 - 多云和阴天的小图标弄反的问题修正：界面 - 系统开启高DPI的时候，窗口太小的问题

软媒清理大师 3.7.3.0：

新增：隐私清理 - Office 2016打开历史记录清理

改进：重复文件查找 - 支持批量操作改进：注册表清理 - 屏蔽注册表清理功能

修正：隐私清理 - Office 2013打开历史记录清理不掉的问题

软媒设置大师 3.6.8.0：

新增：资源管理器 - 关闭MKV视频预览

软媒雷达 6.0.7.0：

修正：本机信息 - 读取IE的Flash Player版本号错误的问题修正：界面 - 系统开启高DPI的时候，窗口太小的问题

软媒IE管理大师 1.9.8.0：

修正：界面 - 系统开启高DPI的时候，窗口太小的问题

软媒WiFi助手 1.1.8.0：

修正：稳定性 - 启动WiFi助手时可能发生的崩溃问题

软媒压缩 1.1.5.0：

修正：界面 - 系统开启高DPI的时候，窗口太小的问题

二、为什么大家都在用魔方？

软媒魔方好不好？软媒魔方有什么用？为什么要用软媒魔方？

先列出一些基本组件功能：

1、清理大师：一键清理、深度清理、注册表清理、字体清理，还有隐私清理。。。难道你不需要？

2、美化大师：改系统字体、DIY win7开始按钮、设置开机动画、破解系统主题、修改系统声音。。。怎么个性怎么玩，美化大师全搞定！

3、优化大师：一键加速、添加、删除系统启动项，让你轻松掌控系统进程的开启！

4、软媒时间，软媒全球首创独创的创意，任务栏时间区加入农历、天气等显示，不占任何额外空间，超NB！

5、软媒桌面：哈，Windows系统里多了类似苹果Mac OS X的快捷栏，方便大发了。

6、软件管家：精选装机必备软件大全，下载杠杠的……

7、系统雷达：任务栏窗口+桌面悬浮窗自由随意选择，实时监控网络流量、CPU、内存占用、磁盘读写，简单、清晰、方便！

8、U盘启动：一键制作U盘系统安装盘，装机还是PE维护简直轻松到极点！

9、硬盘装机：仅需两步，轻松帮你重装系统，win7、win8、win10，想装什么装什么，你肯定需要！

10、WiFi共享助手：超级简单，打开软件，一键开启热点，立马摆脱手机流量不够用的困扰！！亲，你的流量还够用吗？

还有啥？上面列出的连一半功能都不到，还有网速测试、磁盘大师、文件校验、文件解锁、文件分割合并、文件粉碎……等等，还有好多功能，你能想到的基本都有！

软媒魔方现在已经有4000万用户下载使用，好用没得说！

三、软媒魔方软件截图

只需一键，智能模式让你可以放心的把软媒魔方介绍给你的老婆、小姨子和表妹……

右上角轻松切换到专业模式，熟悉中包含着科学改进后的经典布局

软媒时间，风云变幻-不占用任何额外空间，万年历天气闹钟记事本在任务栏时间区完美呈现；

软媒桌面，好玩好看-喜欢的鼠标拖进来，不爱的鼠标拖出去，桌面干净整洁灵动惊艳；

软媒雷达，实时侦探-把握您爱机的每一跳脉动，精确掌控系统软硬件的占用资源；

软件管家，纯净精干-编辑精选装机必备的500款最常用软件，一键安装绝无插件；

四、软媒魔方下载信息

初级用户解惑：安装包和绿色版有什么不同？安装版下载后直接双击运行即可进入向导安装，方便快捷。绿色版是ZIP压缩格式，直接解压到你指定的文件夹路径下。

软媒 - 存在，创造价值。

微信搜索“IT之家”关注抢6s大礼！下载IT之家客户端（戳这里）也可参与评论抽楼层大奖！