潇湘竹 發表於 2022-8-3 10:07:26

SwiftUI智能家居开关灯页面搭建示例

<div id="navCategory"><h5 class="catalogue">目录</h5><ul class="first_class_ul"><li>项目背景</li><li>项目搭建</li><li>背景卡片</li><li>页面标题</li><li>灯视图</li><li>开关按钮</li><li>整体布局</li><li>项目展示</li><li>本章代码</li></ul></div><p class="maodian"></p><h2>项目背景</h2>
<p>晚上临睡前看着头顶上的卧室灯，圆圆的，点击开灯亮起，再点击关灯熄灭，以此反复。</p>
<p>突然大脑里有了一个无聊的灵感，干脆做一个开关灯的<code>App</code>，可以打发无聊的时间。</p>
<p>说干就干。</p>
<p class="maodian"></p><h2>项目搭建</h2>
<p>首先，创建一个新的<code>SwiftUI</code>项目，命名为<code>SmartLight</code>。</p>
<p style="text-align:center"><img alt="" src="https://img.jbzj.com/file_images/article/202208/20220803083232011.jpg" /></p>
<p class="maodian"></p><h2>背景卡片</h2>
<p>首先是背景部分，我们可以使用<code>Rectangle</code>矩形作为背景卡片的设计元素，示例：</p>
<div class="jb51code"><pre class="brush:cpp;">// 背景卡片
func bgCard() -&gt; some View {
    Rectangle()
      .foregroundColor(Color(red: 88 / 255, green: 132 / 255, blue: 234 / 255))
      .frame(minWidth: 0, maxWidth: .infinity, minHeight: 0, maxHeight: .infinity)
      .cornerRadius(16)
      .shadow(radius: 2)
      .padding()
}
</pre></div>
<p>上述代码中，我们创建了一个<code>bgCard</code>视图。</p>
<p>我们给<code>Rectangle</code>矩形增加了背景颜色<code>foregroundColor</code>修饰符，使用<code>frame</code>尺寸修饰符设置了矩形的大小，使用<code>cornerRadius</code>修饰符设置了矩形的圆角，使用<code>shadow</code>修饰符设置了矩形的阴影，最后使用了<code>padding</code>给矩形加了边距。</p>
<p style="text-align:center"><img alt="" src="https://img.jbzj.com/file_images/article/202208/20220803083232012.jpg" /></p>
<p class="maodian"></p><h2>页面标题</h2>
<p>然后是页面标题部分，我们可以使用<code>Text</code>文字作为页面标题，示例：</p>
<div class="jb51code"><pre class="brush:cpp;">// 标题
func titleView() -&gt; some View {
    Text("卧室灯")
      .font(.system(size: 17))
      .fontWeight(.bold)
      .padding(.top, 40)
      .foregroundColor(.white)
}
</pre></div>
<p>上述代码中，我们创建了一个<code>titleView</code>视图。</p>
<p>我们给<code>Text</code>文字设置文字内容为卧室灯，使用<code>font</code>和<code>system</code>修饰符设置文字字号，使用<code>fontWeight</code>修饰符让文字加粗，使用<code>padding</code>边距修饰符让文字距离<code>上边距40</code>，使用<code>foregroundColor</code>修饰符设置文字颜色为白色。</p>
<p style="text-align:center"><img alt="" src="https://img.jbzj.com/file_images/article/202208/20220803083232013.jpg" /></p>
<p class="maodian"></p><h2>灯视图</h2>
<p>对于灯视图，由于我们的灯有开启和关闭两种状态，因此我们首先需要声明一个变量来存储这个状态，示例：</p>
<div class="jb51code"><pre class="brush:cpp;">@State var isOpen: Bool = false
</pre></div>
<p>然后我们可以使用<code>Circle</code>来构建灯的样式，示例：</p>
<div class="jb51code"><pre class="brush:cpp;">// 灯
func lightView() -&gt; some View {
    Circle()
      .stroke(Color(.systemGray6), lineWidth: 80)
      .opacity(isOpen ? 0.9 : 0.5)
      .frame(width: 20, height: 20, alignment: .center)
      .shadow(color: .white, radius: isOpen ? 30 : 0, x: 0, y: 0)
}
</pre></div>
<p>上述代码中，我们创建了一个<code>lightView</code>视图。</p>
<p>我们使用<code>Circle</code>创建了一个圆，然后使用<code>stroke</code>修饰符给这个圆设置了边框颜色和边框宽度，根据<code>isOpen</code>的状态使用<code>opacity</code>设置透明度，使用<code>frame</code>修饰符设置了灯的大小，使用<code>shadow</code>修饰符设置了灯的阴影颜色和阴影面积。</p>
<p>这里我们根据<code>isOpen</code>的状态和透明度、阴影修饰符的作用，构建了开灯时的样式及关闭时的样式。</p>
<p style="text-align:center"><img alt="" src="https://img.jbzj.com/file_images/article/202208/20220803083232014.jpg" /></p>
<p class="maodian"></p><h2>开关按钮</h2>
<p>然后是开关按钮，我们使用<code>Image</code>图片和<code>Text</code>文字作为开关灯的操作按钮和标识文字，示例：</p>
<div class="jb51code"><pre class="brush:cpp;">// 开关
func switchBtn() -&gt; some View {
    VStack(spacing: 20) {
      Image(systemName: "power")
            .foregroundColor(isOpen ? .white : .black)
            .font(.system(size: 32))
            .onTapGesture {
                self.isOpen.toggle()
            }
      Text(isOpen ? "点击关灯" : "点击开灯")
            .font(.system(size: 17))
            .fontWeight(.bold)
            .foregroundColor(isOpen ? .white : .black)
    }.padding(.bottom, 80)
}
</pre></div>
<p>上述代码中，我们创建了一个<code>switchBtn</code>视图。</p>
<p>我们使用<code>VStack</code>垂直排布的方式布置操作按钮和文字，操作按钮部分，我们使用<code>Image</code>构建按钮，使用<code>Apple</code>提供的系统图标。</p>
<p>根据<code>isOpen</code>的状态使用<code>foregroundColor</code>修饰符设置按钮颜色，开启时为白色，关闭时为黑色。使用<code>font</code>修饰符设置按钮大小，使用<code>onTapGesture</code>修饰符给图标添加点击的交互动作，当点击图标时，<code>isOpen</code>的状态被切换。</p>
<p>文字部分就有个小逻辑，即当<code>isOpen</code>开启的时候，文字应该提示&ldquo;点击关灯&rdquo;，而当<code>isOpen</code>处于关闭状态时，文字提示&ldquo;点击开灯&rdquo;。</p>
<p style="text-align:center"><img alt="" src="https://img.jbzj.com/file_images/article/202208/20220803083232015.jpg" /></p>
<p class="maodian"></p><h2>整体布局</h2>
<p>最后我们在<code>body</code>视图中进行所有视图的布局，示例：</p>
<div class="jb51code"><pre class="brush:cpp;">var body: some View {
    ZStack {
      bgCard()
      VStack {
            titleView()
            Spacer()
            lightView()
            Spacer()
            Spacer()
            switchBtn()
      }
    }
}
</pre></div>
<p class="maodian"></p><h2>项目展示</h2>
<p style="text-align:center"><img alt="" src="https://img.jbzj.com/file_images/article/202208/20220803083232016.gif" /></p>
<p class="maodian"></p><h2>本章代码</h2>
<div class="jb51code"><pre class="brush:cpp;">import SwiftUI
struct ContentView: View {
    @State var isOpen: Bool = false
    var body: some View {
      ZStack {
            bgCard()
            VStack {
                titleView()
                Spacer()
                lightView()
                Spacer()
                Spacer()
                switchBtn()
            }
      }
    }
    // 背景卡片
    func bgCard() -&gt; some View {
      Rectangle()
            .foregroundColor(Color(red: 88 / 255, green: 132 / 255, blue: 234 / 255))
            .frame(minWidth: 0, maxWidth: .infinity, minHeight: 0, maxHeight: .infinity)
            .cornerRadius(16)
            .shadow(radius: 2)
            .padding()
    }
    // 标题
    func titleView() -&gt; some View {
      Text("卧室灯")
            .font(.system(size: 17))
            .fontWeight(.bold)
            .padding(.top, 40)
            .foregroundColor(.white)
    }
    // 灯
    func lightView() -&gt; some View {
      Circle()
            .stroke(Color(.systemGray6), lineWidth: 80)
            .opacity(isOpen ? 0.9 : 0.5)
            .frame(width: 20, height: 20, alignment: .center)
            .shadow(color: .white, radius: isOpen ? 30 : 0, x: 0, y: 0)
    }
    // 开关
    func switchBtn() -&gt; some View {
      VStack(spacing: 20) {
            Image(systemName: "power")
                .foregroundColor(isOpen ? .white : .black)
                .font(.system(size: 32))
                .onTapGesture {
                  self.isOpen.toggle()
                }
            Text(isOpen ? "点击关灯" : "点击开灯")
                .font(.system(size: 17))
                .fontWeight(.bold)
                .foregroundColor(isOpen ? .white : .black)
      }.padding(.bottom, 80)
    }
}
</pre></div>
<p>恭喜你，完成了整个项目的全部内容！</p>
<p>以上就是SwiftUI智能家居开关灯页面搭建示例的详细内容，更多关于SwiftUI智能家居开关灯页面的资料请关注琼殿技术社区其它相关文章！</p>
                           
                            <div class="art_xg">
                              <b>您可能感兴趣的文章:</b><ul><li>swiftui开发之padding默认值设置详解</li><li>SwiftUI 引导页界面实现示例</li><li>SwiftUI&nbsp;登录界面布局实现示例详解</li><li>SwiftUI List在MacOS中的性能优化示例</li><li>Compose声明式代码语法对比React Flutter SwiftUI</li><li>SwiftUI开发总结combine原理简单示例详解</li></ul>
                            </div>

                        </div>
                        <!--endmain-->
頁: [1]
查看完整版本: SwiftUI智能家居开关灯页面搭建示例