问题描述
通过MediaObserver观察媒体更改时，如何获取MediaChange []的当前更改？
我观察到当前是数组MediaChange []中的第一项，我可以使用第一项。我还观察到，在MediaChange中具有优先级，我也观察到当前的更改具有最高优先级。哪一个最好？
工作代码示例：
constructor(mediaObserver: MediaObserver) {
this.mediaObserverAsObservable = mediaObserver.asObservable().subscribe((changes: MediaChange[]) => {
// option A.
const currentMediaChange = changes[0];
if (currentMediaChange.mqAlias === 'sm' || currentMediaChange.mqAlias === 'xs') {
if (this.sidenav) {
this.sidenav.close();
}
} else {
if (this.sidenav) {
this.sidenav.open();
}
}
// Option B.
const maxPriority = changes.reduce(
(currentMax,mediaChange) => (mediaChange.priority > currentMax ? mediaChange.priority : currentMax),changes[0].priority
);
const currentMediaChange = changes.find(mc => mc.priority === maxPriority);
if (currentMediaChange) {
if (currentMediaChange.mqAlias === 'sm' || currentMediaChange.mqAlias === 'xs') {
if (this.sidenav) {
this.sidenav.close();
}
} else {
if (this.sidenav) {
this.sidenav.open();
}
}
}
});
}
或者我可以使用mediaObserver.isActive（）来识别与当前视口匹配的查询？
谢谢。
解决方法
在7.0.0-beta.24 (2019-03-17)上import SwiftUI
class SampleOO: ObservableObject {
@Published var name: String = "init name"
}
//ParentView
struct OOSample: View {
//The first version of an @EnvironmentObject is an @ObservedObject or @StateObject
//https://developer.apple.com/tutorials/swiftui/handling-user-input
@ObservedObject var sampleOO: SampleOO = SampleOO()
var body: some View {
VStack{
Button("change-name",action: {
self.sampleOO.name = "OOSample"
})
Text("OOSample = " + sampleOO.name)
//Doing this should fix your error code with no other workarounds
ChildEO().environmentObject(sampleOO)
SimpleChild(name: sampleOO.name)
}
}
}
//Can Display and Change name
struct ChildEO: View {
@EnvironmentObject var sampleOO: SampleOO
var body: some View {
VStack{
//Can change name
Button("ChildEO change-name",action: {
self.sampleOO.name = "ChildEO"
})
Text("ChildEO = " + sampleOO.name)
}
}
}
//Can only display name
struct SimpleChild: View {
var name: String
var body: some View {
VStack{
//Cannot change name
Button("SimpleChild - change-name",action: {
print("Can't change name")
//self.name = "SimpleChild"
})
Text("SimpleChild = " + name)
}
}
}
struct OOSample_Previews: PreviewProvider {
static var previews: some View {
OOSample()
}
}
进行了中断更改，因此可以观察到angular/flex-layout返回mediaObserver.asObservable()
MediaChange source code具有一个称为优先级的属性，该属性为您提供激活的优先级，在MediaChange[]上的外观按descendent order排序。
换句话说，最高优先级是第一位。选项A我认为，这是基于上面的最佳选择。因为您应该选择活动的MediaChange[]，所以它是最高优先级。当我们知道它排在第一位时，就不需要使用mediaQuery。