当前位置： 移动技术网 > 移动技术>移动开发>Android > SwiftUI2.0更新五使用DatePicker提醒事件

SwiftUI2.0更新五使用DatePicker提醒事件

2020年07月09日  | 移动技术网移动技术  | 我要评论

DatePicker

升级后的DatePicker变得比以前好用了，改变了选择方式，从而选择日期，年份什么的更方便了，至少比之前的方便不少。
学习一个简单的提醒事件，通过选择DatePicker来确定提醒时间及日期，然后提醒，过程中涉及对Modifier的自定义，方便重复利用已经制作好的Modifier。

  1. 新建SwiftUI工程，命名随便。
  2. 新建swift文档，用于操作LocalNotification.
    代码
import Foundation
import SwiftUI

class LocalNotificationManager: ObservableObject{}

在类中，添加如下代码，配置通知的各种参数

var notifications = [Notification]()
    
    init(){
        UNUserNotificationCenter.current().requestAuthorization(options: [.alert,.badge,.sound]){
            granted,error in
            if granted == true && error == nil{
                print("用户允许操作")
            }else {
                print("用户拒绝")
            }
        }
    }
    
    func sendNotification(title:String, subtitle: String?,body: String,lanchIn:Date){
        
        let content = UNMutableNotificationContent()
        content.title = title
        if let subtitle = subtitle{
            content.subtitle = subtitle
        }
        content.body = body
        
        let name = "view"
        //工程中加入了图片，从网上down的，命名为view
        guard let imageURL = Bundle.main.url(forResource: name, withExtension: "jpg") else {
            return
        }
        
        let attachment = try! UNNotificationAttachment(identifier: name, url: imageURL, options: .none)
        content.attachments = [attachment]
        let calendar = Calendar(identifier: .gregorian)
        let components = calendar.dateComponents([.year,.month,.day,.hour,.minute], from: lanchIn)
        //以日历匹配方式触发
        let trigger = UNCalendarNotificationTrigger(dateMatching: components, repeats: false)
        let request = UNNotificationRequest(identifier: "notification", content: content, trigger: trigger)
        
        UNUserNotificationCenter.current().add(request, withCompletionHandler: nil)
    }

到此，localNotification配置差不多了.

3.进入content.swift
先上一张效果图。工程完成后的界面就是这个样子的。然后上代码
在这里插入图片描述
在ContentView中，定义如下变量

	@State private var dueDate = Date()
    @State var showFootnote = false
    @State private var typeText = ""
    @ObservedObject var notificationManager = LocalNotificationManager()

为了显示日期的规范化，加入了compute 变量，应该算是swift特色闭包应用

var dateFormatter: DateFormatter {
        
   let formatter = DateFormatter()
   formatter.locale = Locale(identifier: "zh_CN")
   //yy:年 mm : 月    dd : 日期     E : 星期几      HH:mm : 24小时制     h:mm a : 12小时制
   formatter.dateFormat = "yy/MM/dd/E hh:mm a"
   return formatter
        }

此时变量是不能定义为@State类型的
估计是我最中运行在模拟器上的原因,模拟器已经配置本地语言为简体中文，所以就算local选择中国，显示时还是没有显示中文。

在body内

依次加入各种组件

VStack{
TextField("输入提醒内容", text: $typeText)
DatePicker(selection: $dueDate, displayedComponents: [.hourAndMinute,.date]) {
                    Text("Select a date")
                }.frame(maxHeight:300)
Text("您选择的提醒时间为: \(dueDate, formatter: dateFormatter)")
}

在 ***Text("您选择的提醒时间为）***之下加入Button
Button的action中引入了Animation，就是动画，使用的是默认的动画模式，即使是布尔变量，依然可以引入动画。

Button(action: {
      withAnimation{
          self.showFootnote.toggle()
          self.notificationManager.sendNotification(title: "Hello", subtitle: nil, body: typeText, lanchIn: self.dueDate)}}){
           Text("开启提醒")
     }

开启提醒成功提示
if showFootnote{
Text(“提醒开启成功”)
}
完成！！
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述
几个文本输入与显示的地方还可以修改一下，为每一个text以及textField添加如下modifier
在这里插入图片描述
在这里插入图片描述
不一一例举了
上图在这里插入图片描述
在这里插入图片描述
如果工程中需要modifier的很多，可以考虑自定modifier。
关于modifier后续单独学习，单⬆️代码

struct BorderedViewModifier: ViewModifier{
    func body(content: Content) -> some View {
        content
            .padding(EdgeInsets(top: 8, leading: 16, bottom: 8, trailing: 16))
                .overlay(RoundedRectangle(cornerRadius: 8)
                    .stroke(lineWidth:2)
                    .foregroundColor(.blue)
            ).shadow(color: Color.gray.opacity(0.4), radius: 3, x: 1, y: 2)
    }
}

extension View{
    func bordered() -> some View{
        ModifiedContent(content: self, modifier: BorderedViewModifier())
    }
}

然后

TextField("输入提醒内容", text: $typeText)
    .bordered()
Text("开启提醒")
    .bordered()
等等...

运行后
在这里插入图片描述
界面与之前一样。

本文地址：https://blog.csdn.net/jackwsd/article/details/107199611

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网