implementation 'androidx.ui:ui-framework:0.1.0-dev06'
implementation 'androidx.ui:ui-layout:0.1.0-dev06'
implementation 'androidx.ui:ui-material:0.1.0-dev06'
implementation 'androidx.ui:ui-tooling:0.1.0-dev06'

现在，我们完成了项目的设置。让我们构建 UI。到目前为止，我们使用 setContentView 从 XML 文件扩充布局。但在本教程中，我们将使用Jetpack compose来设计布局文件。

步骤05.在活动文件中，
override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setContent {
        //your design 
    }
}

现在，我们将设计设置为 setContent。这里我们调用一个函数。我们使用可组合函数。因此，作为开发人员，让我们从Hello World开始。

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            Text("Hello world!")
        }
    }
}
步骤06.让我们讨论如何创建可组合函数。

要创建可组合函数，我们需要使用@Composable注释。

@Composable
fun helloWorld() {
    Text(text = "Hello World")
}

并在 setContent{} 中调用 helloWorld（）

  • 可组合函数只能从另一个可组合函数调用。
  • 可组合函数是我们用于在屏幕上绘制 UI 的函数。所有写在其中的小部件都呈现在屏幕上。
    步骤07.让我们定义一个容器。
    在这里，如果我们需要在线性布局中具有垂直模式的方向行为。在这里，我们使用列，
Column {
    //the inside widgets
}

这将按垂直顺序堆叠线性布局中的元素。在这里，让我们用一个按钮的例子来讨论，

Column {
    Button {
        Clickable(onClick = {
            Log.d(TAG, "This is Button 1")
        }) {
            Text("Click Me", style = TextStyle(color = Color.White))
        }
    }
    Spacer(modifier = LayoutHeight(16.dp))
    Button(backgroundColor = Color.White) {

        Clickable(onClick = {
            startActivity(
                Intent(
                    this@MainActivity,
                    UserListActivity::class.java
                )
            )
        }) {

            Text(text = "This is Button 2", style = TextStyle(color = Color.Black))
        }
    }
}

在这里，我们设计了两个按钮

  • 在我们第一次声明一个Button小部件的地方，我们在其中实现了一个Clickable负责单击按钮的控件。在第一个按钮中，它将打印一个日志。TextStyle在此，我们使用()更新了按钮中文本的样式。
  • 然后我们添加了一个Spacer，它在两个 16dp 单位的按钮之间添加了一个空格。
  • 最后，我们实现了第二个按钮，点击它会打开一个新的活动。在这里，我们更改了文本样式并将 of 更改backgroundColor为Button白色。

输出

如果我们想在android中采用Material design原理的设计，可以使用 MaterialTheme()

MaterialTheme {
    // Widgets 1
    // Widgets 2
    // Widgets 3
}
步骤 08。让我们讨论如何使用 Jetpack Compose 构建列表，

让我们首先创建一个名为 UserListActivity 的新活动，并在其中添加，

class UserListActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            MaterialTheme {
                populateUser()
            }
        }
    }}

在此，我们添加了一个小部件 Material Theme，然后为其添加了一个子可组合函数populateUser()。

现在，populateUser() 看起来像，

@Preview
@Composable
private fun populateUser() {
    setupList(UserDataSource.getUsers())
}

在这里，我们将有另一个可组合函数setupList()，我们将从数据源传递用户列表。它可以来自本地存储、静态数据甚至来自 API。

我们的用户数据类看起来像，

data class User(val id: Int = 0, val name: String = "", val email: String = "")

现在，在我们的示例中，我们将创建一个显示用户名和电子邮件的列表。

在setupList() 函数中，

@Composable
private fun setupList(users: List<User>) {
    VerticalScroller {
        Column {
            users.let {
                it?.forEach { user ->
                    printUser(user)
                }
            }
        }
    }
}

我们将添加一个名为的小部件，该小部件VerticalScroller将负责显示用户列表。在小部件中，我们添加了一个Column这样，我们可以让所有用户垂直堆叠。然后我们遍历以单独获取用户并将其传递给printUser()可组合函数。

在printUser()函数中，

@Composable
private fun printUser(user: User) {
    Ripple(bounded = true) {
        Clickable(
            onClick = {
                Toast.makeText(
                    this@UserListActivity,
                    "You click on name ${user.name}",
                    Toast.LENGTH_SHORT
                ).show()
            }
        ) {
            Card {