ui层-新晋网红SwiftUI——淘宝带你初体验

岑鬼鬼_ui层_岑鬼鬼音乐

struct ContentView : View {
    var body: some View {
        VStack {
            MapView()
                .edgesIgnoringSafeArea(.top)
                .frame(height: 300)
            
            CircleImage()
                .offset(y: -130)
                .padding(.bottom, -130)
            
            VStack(alignment: .leading) {
                Text("Turtle Rock")
                    .font(.title)
                HStack(alignment: .top) {Text("Joshua Tree National Park")
                        .font(.subheadline)
                    Spacer()
                    Text("California")
                        .font(.subheadline)
                }
                }
                .padding()
            
            Spacer()
            
        }
    }
}

Widget _listItemBuilder(BuildContext context, int index) {
    return Container(
      color: Colors.white,
      margin: EdgeInsets.all(8.0),
      child: Stack(
        children: [
          Column(
            children: [
              AspectRatio(
                aspectRatio: 16/9,
                child: Image.network(posts[index].imageUrl, fit: BoxFit.cover),
              ),
              SizedBox(height: 16.0),
              Text(
                posts[index].title,
                style: Theme.of(context).textTheme.title
              ),
              Text(
                posts[index].author,
                style: Theme.of(context).textTheme.subhead
              ),
              SizedBox(height: 16.0),
            ],
          ),
          Positioned.fill(
            child: Material(
              color: Colors.transparent,
              child: InkWell(
                splashColor: Colors.white.withOpacity(0.3),
                highlightColor: Colors.white.withOpacity(0.1),
                onTap: () {
                  Navigator.of(context).push(
                    MaterialPageRoute(builder: (context) => PostShow(post: posts[index]))
                  );
                }
              ),
            ),
          ),
        ],
      ),
    );
  }

观察语法的细节，我们可以注意到一些特征，使用典型的声明式语法，开发者声明 UI 的布局方式，一切的布局都交给引擎来解决。在写代码层面 Dart 使用,来分割不同的，这会造成在复杂的布局中，()语法嵌套极其复杂，配上的插件也看的眼花缭乱。

而 Swift 虽然也是声明式语法，但是仔细注意到，Swift 的 View 组合并不是由,分割，而是由换行分割，在 Swift 中函数调用是可以换行分割的。这样的 DSL 对开发者的体验更为友好，推测使用了类似标记的特征，在统一的时机去做布局。

这样可以做到非常清晰的可读性，并且代码长度也大大缩短。不信你看终于支持了 ,在 -C 时代我们的显示器是没有足够空间给我们显示的。（2019年6月12日更新，Swift 的 DSL 使用构建ui层，是一个特殊的语法糖，本质上和一样)。

ui层_岑鬼鬼_岑鬼鬼音乐

但是 Xcode 有一点做的是不如的代码格式化功能非常差，不过相信这点可以通过插件弥补。

Live

曾几何时客户端上的开发同学有多么羡慕前端开发同学的 Liveui层，尤其是 iOS 平台，动辄链接 5 分钟，极大的影响了开发效率，这次苹果官方给开发者带来了此项功能。

但 One More Thing ，在 Xcode 中不仅仅可以通过代码改变实时预览，还可以通过编辑预览生成代码， This is 。

想象一下在业务开发后期 UED 同学和你校对视觉的时候是不是可以直接编辑 UI 生成代码，而不需要重新编译。

的 Live 功能只能在设备上运行时才能工作，但是的功能默认是和 Xcode 深度集成。

我们可以通过 Group 功能同时预览多个设备，多个不同的环境，涉及到多设备时要强大于。

岑鬼鬼_岑鬼鬼音乐_ui层

struct LandmarkList_Previews: PreviewProvider {
    static var previews: some View {
        ForEach(["iPhone SE", "iPhone XS Max", "iPad mini 4", "Mac", ].identified(by: .self)) { deviceName in
            LandmarkList()
                .preferredColorScheme(.dark)
                .previewDevice(PreviewDevice(rawValue: deviceName))
                .previewDisplayName(deviceName)
            .previewLayout(.sizeThatFits)
            
        }
    }
}

可以在 Xcode 里面直接切换可以不运行设备直接进入交互模式，再具有多个预览设备时可以很方便的动态调试 UI 布局。

Data Flow

使用的回掉，通知框架刷新，但是对于真实的业务场景，数据流的管理是一个复杂的问题，官方建议使用 BLOC 和 Redux 加上比较流行的框架控制业务数据的单向流动。但是在中，官方使用 Swift 5.1 带来的新的语法糖（）来定义，可读性提示非常明显，且有官方维护的 @ 和框架支持。来自业务的数据流动会比更为清晰。

岑鬼鬼_ui层_岑鬼鬼音乐

‍Mix With UIKit

‍

任何一门新技术，对于当前的技术其实都是一次冲剂，对于旧的技术虽然经过了很多年的历史沉淀，有很多的积累，但是这些积累同时变成了包袱，如何背着包袱负重前行，是任何一门新技术都要考虑的问题，显然 Swift UI 也考虑到了，目前官方给出的文档中，是可以和 UIKit 原有的体系很轻松的混合在一起。让开发者可以渐进式的接入。

Older iOS

官方声称目前仅支持 iOS 13.x 以上，很多 APP 目前还在兼容 iOS 9 ，看起来用上 Swift UI 还需要 4 年，但是观察今年苹果的重大改变，包括， iOS 12 以下蜂窝网络下载可以大于 200M , 苹果官方包优化大小减少 50% ，iOS 13 以上甚至完全不限制在蜂窝网络下下载的大小，有理由相信苹果可以考虑把内置在 APP 包内，使开发者可以更轻易地兼容低版本的操作系统。

Swift On All Apple

苹果今年推出的口号是The path to great apps on every , 提供的 View 架构在 UIKit TVKit 都有对应的视图实现，苹果还指出没有一种写法可以适应所有的设备，要充分发挥各平台的特色。

但是学习了可以通过简单的适配到所有的平台，不同于的 once, Write 和 Weex 的 Write Once, Run 。苹果充分考虑到用户的实际体验，Apple TV 大屏的体验和 Apple Watch 的便携体验差异巨大，因此的理念是 Learn once,Apply ，各个平台有各个平台的特色实现，但在层的 API 写法仍然是一致的。

ui层_岑鬼鬼音乐_岑鬼鬼