追新SwiftUI做个2020最火的Neumorphism风格按钮_知识大胖的博客-程序员宅基地

项目完成后，您将能够制作下面到效果

image.png

Jietu20200223-125504.gif

本文学到技能

阴影效果制作
下面代码就是实现浮雕到核心逻辑，左上角亮右下角暗，然后背景，按钮背景，按钮前景颜色都一样，最终浮雕效果就出来了。

.shadow(color: Color.white, radius: 8, x: -8, y: -9)
.shadow(color: Color(red: 163/255, green: 177/255, blue: 198/255), radius: 8, x: 9, y: 9)

image.png

什么是Neumorphism

一图胜千言

Neumorphism风格

2020年国外设计界开始流行一种叫 Neumorphism 的设计风格，也有人称为 Soft UI。Neumorphism 风格被的理解为新一代的拟物风潮，我们其实可以简单的叫他浮雕效果。

实战做个Neumorphism按钮

1、创建一个项目
让我们从打开Xcode 11并创建一个Single View App开始，项目名为newButton。

image.png

2、现在有了新的干净视图，让我们开始吧。删除代码并添加以下内容：

漂亮的灰色界面

我们制作了一个漂亮的灰色界面

import SwiftUI

struct ContentView: View {
    var body: some View {
        ZStack {
            Color(red: 224/255, green: 229/255, blue: 236/255)
        }
        .edgesIgnoringSafeArea(.all)
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

预览效果

3、增加按钮
接下来，添加按钮，并在按钮中添加图像。将框架的宽度和高度设置为80。

import SwiftUI

struct ContentView: View {
    var body: some View {
        ZStack {
            Color(red: 224/255, green: 229/255, blue: 236/255)
            
            Button(action: {}) {
                Image(systemName: "heart.fill")
                .resizable()
                .frame(width: 80, height: 80)
                
            }
        }
        .edgesIgnoringSafeArea(.all)
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

现在，我们应该有这样的效果

image.png

4、让我们添加一些空间以给heart图片，并给按钮侧面留出空间，最后让边缘变圆

本文链接：https://blog.csdn.net/iCloudEnd/article/details/104473622

原作者删帖不实内容删帖广告或垃圾文章投诉

智能推荐

error: 'CONFIG_SYS_SDRAM_BASE' undeclared _独角鲸的博客-程序员宅基地

移植的第一步当然是下载最新版本的uboot源码，下载地址如下：ftp://ftp.denx.de/pub/u-boot/u-boot-2010.12.tar.bz2进入相应路径：cd /home/bsc解压缩：tar jxvf u-boot-2010.12.tar.bz2 进入生成的文件夹，在uboot主目录：cd u-boot-2010.12首先编译下看看是否可以编译成功（交叉编译器

施密特正交化的几何意义与推导_施密特正交化几何意义_异次元的归来的博客-程序员宅基地

对于一组向量，有时候我们需要对其进行正交化处理，也就是说，该组向量中任意两个向量都是互相垂直的。那么，要怎么做呢？假设只有两个向量，v⃗0\vec v_0v0和v⃗1\vec v_1v1，正交化的几何示意图如下所示。假设正交化之后的向量为w⃗0\vec w_0w0和w⃗1\vec w_1w1，那么由图可知，可得w⃗0=v⃗0\vec w_0 = \vec v_0w0=v0，且有：..._施密特正交化几何意义

脑网络| 分析相关概念详解（汇总）_脑网络节点相关_oh__NO的博客-程序员宅基地

“小世界”网络.研究表明, 规则网络具有较高的集群系数和较长的最短路径长度, 与此相反,随机网络拥有较低的集群系数和较短的最短路径长度.兼具高集群系数和最短路径长度的网络称为“小世界”网络.将随机网络作为基准,如果所研究网络相对于随机网络具有较大的集群系数和近似的最短路径长度, 即γ = Creal/Crandom>> 1, λ= Lreal/Lrandom~ 1 (其中脚标r..._脑网络节点相关

错误: 未能完成程序集的安装(hr = 0x8007000b)。探测终止。_xsm1217的博客-程序员宅基地

Winform运行程序抛出异常：未能加载文件或程序集“Geckofx-Core, Version=29.0.17.0, Culture=neutral, PublicKeyToken=3209ac31600d1857”或它的某一个依赖项。试图加载格式不正确的程序。日志显示：日志: 此绑定从 default 加载上下文开始。日志: 正在使用应用程序配置文件: D:\Project\**\**\bin\Debug\**.exe.Config日志: 使用主机配置文件:日志: 使用 C:\Wind_未能完成程序集的安装(hr = 0x8007000b)。探测终止

数理统计实（试）验—多元回归分析excel操作分析&回归统计表、方差分析表、系数怎么看？R是什么意思？_回归统计和方差分析表怎么看_小乖乖的臭坏坏的博客-程序员宅基地

作于：2020-12-4修改于：2020-12-1114：52_回归统计和方差分析表怎么看

LeetCode——21.合并两个有序链表_李霁明的博客-程序员宅基地

文章目录21.合并两个有序链表题目代码1、递归方法2、迭代方法小结：21.合并两个有序链表来源：力扣（LeetCode）链接：https://leetcode-cn.com/problems/merge-two-sorted-lists著作权归领扣网络所有。商业转载请联系官方授权，非商业转载请注明出处。题目将两个升序链表合并为一个新的升序链表并返回。新链表是通过拼接给定的两个链表的所有节点组成的。示例：输入：1->2->4, 1->3->4输出：1->1-