AndroidIOS

声明式UI JetPack Compose和SwiftUI的区别

2020-06-18  本文已影响0人  儿歌八万首

大家都知道,移动端两大巨头,iOS和Android。苹果公司出了swift语言用来替代objective-C开发iOS,谷歌出了kotlin用来代替*java开发android。谷歌和苹果也在不断的推动开发者使用这两种新的语言去开发移动端应用。swift相对于OC来说 更易于维护,更加安全,语法更加简洁。kotlin相对于Java来说 更友好、更快捷、更容易。可以说两家公司步伐都基本一致。
两家公司后来也同样推出了两种不同的声明式UI,苹果的swiftUI以及安卓的Jetpack Compose,声明式UI编程将变得越来越主流,今天我们就来对比下两种声明式UI的区别。
Jetpack Compose 的横向布局和竖向布局可以分别用Row,Column来标示。用法可以参考下面代码:

   Row{
            Text(text = "Hello Android!")
            Spacer(modifier = Modifier.preferredWidth(16.dp))
            Column {
                Text(text = "Hello Android!")
                Text(text = "Hello Android!")
            }
        }

swiftUI的横向布局和竖向布局可以分别用HStack和VStack来表示:

   HStack{
            Text("Hello Android!")
            Spacer(minLength: 16.0)
            VStack {
               Text("Hello Android!")
               Text("Hello Android!")
            }
        }
横行布局和竖向布局效果图

可以看出,声明式的UI 不论式声明语言,语法都式比较像的,甚至部分空间名称都式一样的。
现在我们来看看如果我们要写一个列表来展示数据,应该怎么处理,
首先我们来看一下Jetpack Compose:

Column {
        users.forEach {
            Row(Modifier.fillMaxWidth()){
                Text(it.name)
                Spacer(modifier = Modifier.preferredWidth(16.dp))
                Text("android")
            }
        }
    }

再来看看swiftUI:

 List(0..<5){item in
            VStack{
                Text("nihao")
                Spacer(minLength: 16.0)
                Text("ceshihsihsi").font(.body).multilineTextAlignment(.center)
            }
            
        }
列表效果图

可以看出来他们之间还是有差别的,Jetpack Compose的控件Text如果不再循环外面嵌套一个线性控件的话,所有Text都会重复叠加再一期,默认展示方式应该是和Android的FramLayout 一样,而swiftUI则不需要再外循环外面嵌套一层布局,因为默认就是竖像排列的。

上一篇下一篇

猜你喜欢

热点阅读