使用 Jetpack Compose 构建高效可滚动列表：从基础到进阶技巧

在这篇文章中，我们将使用 Jetpack Compose 为 Android 应用程序添加可滚动的列表

添加更多可组合项

再创建一个可组合项来显示 Greeting 列表。

@Composable
fun MyList() {
    Column {
        Greeting(name = "Fatima")
        Greeting(name = "Fatima")
        Greeting(name = "Fatima")
    }
}

将 setContent 中的显示更新为 MyList()，并同时在预览中调用。

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            ComposeAppTheme {
                MyList()
            }
        }
    }
}

// MyList() 可组合项定义在这里，Greeting() 可组合项不会被删除

@Preview(showBackground = true)
@Composable
fun GreetingPreview() {
    ComposeAppTheme {
        MyList()
    }
}

添加 Surface 到 MyList() 可组合项

在 MyList() 可组合项中添加 Surface。

@Composable
fun MyList() {
    Surface(
        color = MaterialTheme.colorScheme.background,
        modifier = Modifier.fillMaxSize()
    ) {
        // 内部代码不需要更改
    }
}

字符串列表

我们将显示名称列表，因此需要准备数据并将参数添加到 MyList() 可组合项中。

准备名称数据，类型为 List of String。

// 这里需要的导入

private val names = listOf(
    "Tingky",
    "Wingky",
    "Dipsy",
    "Lala",
    "Pooh",
    "Sepooh",
    "Tiger",
    "Piglet",
    "Rabbit"
)

// MainActivity 类定义在这里

在 MyList() 可组合项中添加 List of String 参数。

@Composable
fun MyList(
    names: List<String>
) {
    // 内部代码不需要更改
}

使用参数 names 调用 MyList() 函数。

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            ComposeAppTheme {
                MyList(names)
            }
        }
    }
}

// 其他代码无需修改

@Composable
fun MyList(
    names: List<String>
) {
    // 内部代码不需要更改
}

LazyColumn

要创建高效的可滚动列表，可以使用 LazyColumn。LazyColumn 相当于使用 XML 时的 RecyclerView。

LazyColumn 仅会渲染当前屏幕可见的项，这使得 LazyColumn 在处理大量列表项时拥有良好的性能。

使用 LazyColumn，更新 MyList() 可组合项如下：

@Composable
fun MyList(
    names: List<String>
) {
    Surface(
        color = MaterialTheme.colorScheme.background,
        modifier = Modifier.fillMaxSize()
    ) {
        LazyColumn {
            items(items = names) { name ->
                Greeting(name = name)
            }
        }
    }
}

If — Else 条件判断

添加 If — Else 语句判断来显示列表数据。如果没有数据，则显示一条文本提示。

@Composable
fun MyList(
    names: List<String>
) {
    Surface(
        color = MaterialTheme.colorScheme.background,
        modifier = Modifier.fillMaxSize()
    ) {
        if(names.isEmpty()) {
            Text(text = "No one here :(")
        } else {
            LazyColumn {
                items(items = names) { name ->
                    Greeting(name = name)
                }
            }
        }
    }
}

要查看此视图，需要修改调用 MyList() 函数时传递的参数。

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            ComposeAppTheme {
                MyList(listOf())
            }
        }
    }
}

// 其他代码不变

@Preview(showBackground = true)
@Composable
fun GreetingPreview() {
    ComposeAppTheme {
        MyList(listOf())
    }
}

Box 布局

添加 Box 布局，使提示文本居中显示在屏幕中间。

if (names.isEmpty()) {
    Box(
        modifier = Modifier.fillMaxSize(),
        contentAlignment = Alignment.Center
    ) {
        Text(text = "No one here :(")
    }
}