[Day2] Jetpack Compose： UI要怎麽排列？

#布局

接续昨天的例子，我们如果新增一个Greeting("Jetpack Compose")会发生什麽事呢？

Surface(modifier = Modifier.fillMaxSize(), color = MaterialTheme.colors.background) {
                    Greeting("Android")
                    Greeting("Jetpack Compose")
                }

可以看到，两个text的元件重叠在一起了，那怎麽办呢？我们可以使用两个好东西。

Column

Column可以当作设定成vertical的LinearLayout，里面的每一个元件都会一行一行的往下排，如下面的程序码：

@Composable
fun displayColumn() {
    Column {
        Text("我是Line1")
        Text("我是Line2")
        Text("我是Line3")
    }
}

结果就会是:

Row

有Column就会有Row，一列一列的往右边排:

那他们可以组合在一起吗？当然可以，比如说我要制作一个名片，所以第一行是名字，第二行包含公司和电话：

Column {
    Text("皮卡丘")
    Row {
        Text("谷歌")
        Text("0911-222-333")
    }
}

结果就会是:

虽然字都挤在一起了，但我们成功让名字在上面，公司和电话一起在下面了喔～

Modifier

Modifier是什麽东西呢？我们来看看Document的说明：

An ordered, immutable collection of modifier elements that decorate or add behavior to Compose UI elements. For example, backgrounds, padding and click event listeners decorate or add behavior to rows, text or buttons.

可以看到，这些modifier elements可以用来定义我们元件各种设定和样式，比如说刚刚那个名片我们觉得他太靠边边了，想要帮Column加上padding，那就可以这样写:

Column(modifier = Modifier.padding(16.dp)) {
    Text("皮卡丘")
    Row {
        Text("谷歌")
        Text("0911-222-333")
    }
}

如此一来，我们就帮Column加上16dp的padding了喔～～

Image

要使用图片的话，可以使用Image元件，图片就随便找一张原本有的图片ID：

Column(modifier = Modifier.padding(16.dp)){
    Image(
        painter = painterResource(R.drawable.ic_launcher_foreground),
        contentDescription = null,
    )
    Row {
        Text("谷歌")
        Text("0911-222-333")
    }
}

那如果要使用网路图片呢？

Image可以依照你输入的是url还是id来判断说他是不是要开启新的thread去取用网路资源～

没有他才不行，但有很多已经写好的套件可以，像是Picasso, Glide 和 Coil等等，下面展示了用Coil去载入图片的方式：

先把Coil的套件加入gradle

implementation("io.coil-kt:coil-compose:1.3.1")

Column(modifier = Modifier.padding(16.dp)){
    Image(
        painter = rememberImagePainter(
            data = "https://tnimage.s3.hicloud.net.tw/photos/2019/12/20/1576828719-5dfc7f2f96d3e.jpg",
        ),
        contentDescription = null,
    )
    Row {
        Text("谷歌")
        Text("0911-222-333")
    }
}