Learn-Jetpack-Compose-By-Example----基本概念---

26 阅读1分钟

class SimpleTextActivity : 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 {
            // Column is a composable that places its children in a vertical sequence. You
            // can think of it similar to a LinearLayout with the vertical orientation. 
            // In addition we also pass a few modifiers to it.

            // You can think of Modifiers as implementations of the decorators pattern that are used to
            // modify the composable that its applied to. In the example below, we configure the
            // Column to occupy the entire available height & width using Modifier.fillMaxSize().
            Column(
                modifier = Modifier.fillMaxSize(),
                verticalArrangement = Arrangement.Center,
                horizontalAlignment = Alignment.CenterHorizontally,
                content = {
                    // Here, SimpleText is a Composable function which is going to describe the contents of
                    // this activity that will be rendered on the screen.
                    SimpleText("This is the Learn Jetpack Compose By Example tutorial")
                }
            )
        }
    }
}

// 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.
@Composable
fun SimpleText(displayText: String) {
    // We should think of composable functions to be similar to lego blocks - each composable
    // function is in turn built up of smaller composable functions. Here, the Text() function is
    // pre-defined by the Compose UI library; you call that function to declare a text element
    // in your app.
    Text(text = displayText)
}


/**
 * Android Studio lets you preview your composable functions within the IDE itself, instead of
 * needing to download the app to an Android device or emulator. This is a fantastic feature as you
 * can preview all your custom components(read composable functions) from the comforts of the IDE.
 * The main restriction is, the composable function must not take any parameters. If your composable
 * function requires a parameter, you can simply wrap your component inside another composable
 * function that doesn't take any parameters and call your composable function with the appropriate
 * params. Also, don't forget to annotate it with @Preview & @Composable annotations.
 */
@Preview
@Composable
fun SimpleTextPreview() {
    SimpleText("This is the Learn Jetpack Compose By Example tutorial")
}

setContent,接受Activity的整体layout,传递一个compose函数给它。

Modifiers,修饰Column的样式,在例子代码里面是,表示将Column的宽和高,都设置到最大,适配屏幕。

@Preview,预览。

@Composable,添加这个注解,就是compose函数。compose函数,只能被其它compose函数调用。