LazyColumn，Row，Card

LazyColumn

LazyColumn is a vertically scrolling list that only composes and lays out the currently visible items. This is very similar to what RecyclerView tries to do as it's more optimized than the VerticalScroller.

LazyColumn的功能与RecyclerView类似，只会渲染可见的Item，不会一下子全部渲染所有Item。

Row

// 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的功能类似于水平方向的LinearLayout，Row的宽度占满整个屏幕，内边距间隔16dp，这些都是使用modifier来修饰实现的。

Card

Card组件

// 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.fillParentMaxWidth()
        .padding(16.dp)
) {
    // 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(16.dp)
    )
}

整体代码：

class VerticalScrollableActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        // This is an extension function of Activity that sets the @Composable function that's
        // passed to it as the root view of the activity. This is meant to replace the .xml file
        // that we would typically set using the setContent(R.id.xml_file) method. The setContent
        // block defines the activity's layout.
        setContent {
            LazyColumnItemsScrollableComponent(
                getPersonList()
            )
        }
    }
}

// We represent a Composable function by annotating it with the @Composable annotation. Composable
// functions can only be called from within the scope of other composable functions. We should
// think of composable functions to be similar to lego blocks - each composable function is in turn
// built up of smaller composable functions.
@Composable
fun LazyColumnItemsScrollableComponent(personList: List<Person>) {
    // LazyColumn is a vertically scrolling list that only composes and lays out the currently
    // visible items. This is very similar to what RecyclerView tries to do as it's more optimized
    // than the VerticalScroller.
    LazyColumn(modifier = Modifier.fillMaxHeight()) {
        items(items = personList, itemContent = { person ->
            // TODO(vinaygaba) Replace this with an index callback once its available.
            val index = personList.indexOf(person)
            // 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.fillParentMaxWidth()) {
                // 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.fillParentMaxWidth()
                        .padding(16.dp)
                ) {
                    // 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(16.dp)
                    )
                }
            }
        })
    }
}