01. Compose 可组合组件之Row And Column
02. Compose 可组合组件之 属性 modifier
03. Compose 可组合组件之Card 图片
04. Compose 字体
05. Compose State
06. Compose SnackBar
07. Compose List
08. Compose ConstrainLayout
09. Compose Button
10. Compose CheckBox
11. Compose 对于复杂界面的尝试
列表里面嵌套 纵向列表 + 横向列表 + TabRow(TabLayout) + Surface(ViewPager)
@Composable
fun LazyColumnDemo() {
val listData = (0..20).toList()
val childData = (0..10).toList()
val selectedIndex = remember { mutableStateOf(0) }
val tabsName = remember { DemoTabs.values().map { it.value } }
LazyColumn(modifier = Modifier.fillMaxWidth(), content = {
//头部内容
item {
Box(
modifier = Modifier
.fillMaxWidth()
.height(200.dp)
.background(Color.Cyan),
contentAlignment = Alignment.Center
) {
Text(text = "头部")
}
}
//列表内容
items(count = listData.size) {
Box(
modifier = Modifier
.fillMaxWidth()
.height(200.dp)
.background(
if (it % 2 == 0) {
Color.Gray
} else {
Color.LightGray
}
),
contentAlignment = Alignment.Center
) {
if (it == 4) {
LazyColumn(modifier = Modifier
.fillMaxWidth()
.fillMaxHeight(),content = {
items(count = childData.size){content->
Box( modifier = Modifier
.fillMaxWidth()
.height(100.dp)
.background(
if (content % 2 == 0) {
Color.Red
} else {
Color.Yellow
}
),
contentAlignment = Alignment.Center) {
Text(text = "子item $content")
}
}
})
} else if (it == 6) {
LazyRow(modifier = Modifier.fillMaxWidth(),content = {
items(count = childData.size){content->
Box( modifier = Modifier
.fillMaxWidth()
.height(100.dp)
.background(
if (content % 2 == 0) {
Color.Red
} else {
Color.Yellow
}
),
contentAlignment = Alignment.Center) {
Text(text = "子item $content")
}
}
})
} else {
Text(text = "列表项:$it")
}
}
}
//尾部内容
item {
Box(
modifier = Modifier
.fillMaxWidth()
.height(200.dp)
.background(Color.Magenta),
contentAlignment = Alignment.Center
) {
Text(text = "尾部0")
}
}
item {
Column (modifier = Modifier
.fillMaxWidth()
.fillParentMaxHeight()
){
TabRow(modifier = Modifier.height(50.dp),selectedTabIndex = selectedIndex.value) {
tabsName.forEachIndexed {index, title ->
Tab(
selected = index == selectedIndex.value,
onClick = {
when (title) {
DemoTabs.APPLE.value -> {
selectedIndex.value = DemoTabs.APPLE.ordinal
}
DemoTabs.GOOGLE.value -> {
selectedIndex.value = DemoTabs.GOOGLE.ordinal
}
DemoTabs.AMAZON.value -> {
selectedIndex.value = DemoTabs.AMAZON.ordinal
}
}
},
text = { Text(title) }
)
}
}
Surface(modifier = Modifier.fillMaxHeight()) {
when (selectedIndex.value) {
DemoTabs.APPLE.ordinal -> {
Apple()
}
DemoTabs.GOOGLE.ordinal -> {
Google()
}
DemoTabs.AMAZON.ordinal -> {
Amazon()
}
}
}
}
}
})
}
@Composable
fun Apple(){
LazyColumn(modifier = Modifier.fillMaxWidth(),content = {
item(){
Box(modifier = Modifier
.fillMaxWidth()
.height(400.dp)
.background(color = Color.Yellow)){
Text(text = "1",fontSize = 35.sp)
}
}
item(){
Box(modifier = Modifier
.fillMaxWidth()
.height(400.dp)
.background(color = Color.Red)){
Text(text = "2",fontSize = 35.sp)
}
}
item(){
Box(modifier = Modifier
.fillMaxWidth()
.height(400.dp)
.background(color = Color.Green)){
Text(text = "3",fontSize = 35.sp)
}
}
})
}
@Composable
fun Google(){
LazyColumn(modifier = Modifier.fillMaxWidth(),content = {
item(){
Box(modifier = Modifier
.height(400.dp)
.background(color = Color.Yellow)){
Text(text = "1",fontSize = 35.sp)
}
}
item(){
Box(modifier = Modifier
.height(400.dp)
.background(color = Color.Green)){
Text(text = "2",fontSize = 35.sp)
}
}
})
}
@Composable
fun Amazon(){
LazyColumn(modifier = Modifier.fillMaxWidth(),content = {
item(){
Box(modifier = Modifier
.height(400.dp)
.fillMaxWidth()
.background(color = Color.Yellow)){
Text(text = "1",fontSize = 35.sp)
}
}
item(){
Box(modifier = Modifier
.height(400.dp)
.fillMaxWidth()
.background(color = Color.Red)){
Text(text = "2",fontSize = 35.sp)
}
}
item(){
Box(modifier = Modifier
.height(400.dp)
.fillMaxWidth()
.background(color = Color.Green)){
Text(text = "3",fontSize = 35.sp)
}
}
item(){
Box(modifier = Modifier
.height(400.dp)
.fillMaxWidth()
.background(color = Color.Yellow)){
Text(text = "4",fontSize = 35.sp)
}
}
item(){
Box(modifier = Modifier
.fillMaxWidth()
.height(400.dp)
.background(color = Color.Red)){
Text(text = "5",fontSize = 35.sp)
}
}
item(){
Box(modifier = Modifier
.height(400.dp)
.fillMaxWidth()
.background(color = Color.Green)){
Text(text = "6",fontSize = 35.sp)
}
}
})
}
private enum class DemoTabs(val value: String) {
APPLE("Apple"),
GOOGLE("Google"),
AMAZON("Amazon")
}