滚动效果:
scss
@Composable
fun VerticalScrollableComponent(personList: List<Person>) {
// We create a ScrollState that's "remember"ed to add proper support for a scrollable component.
// This allows us to also control the scroll position and other scroll related properties.
// remember calculates the value passed to it only during the first composition. It then
// returns the same value for every subsequent composition. More details are available in the
// comments below.
val scrollState = rememberScrollState()
// Column is a composable that places its children in a vertical sequence.
Column(
modifier = Modifier.scrollable(
state = scrollState,
orientation = Orientation.Vertical
)
) {
for ((index, person) in personList.withIndex()) {
// Row is a composable that places its children in a horizontal sequence. You
// can think of it similar to a LinearLayout with the horizontal orientation.
// In addition, we pass a modifier to the Row composable. You can think of
// Modifiers as implementations of the decorators pattern that are used to
// modify the composable that its applied to. In this example, we configure the
// Row to occupify the entire available width using Modifier.fillMaxWidth() and also
// give it a padding of 16dp.
Row(
modifier = Modifier
.fillMaxWidth()
.padding(vertical = 16.dp, horizontal = 16.dp)
) {
// Card composable is a predefined composable that is meant to represent the card surface as
// specified by the Material Design specification. We also configure it to have rounded
// corners and apply a modifier.
Card(
shape = RoundedCornerShape(4.dp),
backgroundColor = colors[index % colors.size],
modifier = Modifier.fillMaxWidth()
) {
// Text is a predefined composable that does exactly what you'd expect it to
// display text on the screen. It allows you to customize its appearance
// using the style property.
Text(
person.name, style = TextStyle(
color = Color.Black,
fontSize = 20.sp,
textAlign = TextAlign.Center
), modifier = Modifier.padding(vertical = 16.dp)
)
}
}
}
}
}
val scrollState = rememberScrollState()
- 创建并记忆 一个
ScrollState
(保存当前滚动位置、最大可滚范围等)。 - 用
remember
的原因是:在重组(recomposition)时复用同一个状态,避免每次重组滚动位置被重置。 - 想在进程被回收后恢复滚动位置,可用
rememberSaveable()
。
ini
val scrollState = rememberScrollState()
// Column is a composable that places its children in a vertical sequence.
Column(
modifier = Modifier.scrollable(
state = scrollState,
orientation = Orientation.Vertical
)
){}
滚动 vs 列表 :Column + verticalScroll
适合内容较少 、高度固定的简单页面;如果是长列表/大量数据 ,用 LazyColumn
(惰性加载、性能好)。