使用Jetpack Compose在Android中使用TopAppBar

TopAppBar与Android中的“动作栏”小部件相似。这是Android中最多的UI组件之一。操作栏用于表示Android中的应用名称和操作项。在本文中，我们将介绍使用Jetpack compose在Android中实现TopAppBar的方法。

顶部应用程序栏小部件的属性

Attributes	Description
title	this is use to represent the title for our action bar.
navigationIcon	this is use as a leading icon which is use to open navigation drawer.
backgroundColor	this is use to represent backgroundColor of our top app bar.
contentColor	this color is use to give color to our contents of our action bar.
elevation	this is use to give elevation to our top app bar.

分步实施

步骤1：创建一个新项目

要在Android Studio Canary版本中创建新项目，请参阅如何使用Jetpack Compose在Android Studio Canary版本中创建新项目。

步骤2：使用MainActivity.kt文件

添加此图像后，导航至应用程序> Java > MainActivity.kt ，并向其添加以下代码。在代码内部添加了注释，以更详细地了解代码。

Kotlin

import android.graphics.drawable.shapes.Shape
import android.media.Image
import android.os.Bundle
import android.widget.Toast
import androidx.appcompat.app.AppCompatActivity
import androidx.compose.foundation.BorderStroke
import androidx.compose.foundation.Image
import androidx.compose.foundation.InteractionState
import androidx.compose.foundation.Text
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.foundation.text.KeyboardOptions
import androidx.compose.material.*
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.AccountCircle
import androidx.compose.material.icons.filled.Info
import androidx.compose.material.icons.filled.Menu
import androidx.compose.material.icons.filled.Phone
import androidx.compose.runtime.*
import androidx.compose.runtime.savedinstancestate.savedInstanceState
import androidx.compose.ui.Alignment
import androidx.compose.ui.layout.ContentScale
import androidx.compose.ui.platform.setContent
import androidx.compose.ui.res.imageResource
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import com.example.gfgapp.ui.GFGAppTheme
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.SolidColor
import androidx.compose.ui.platform.ContextAmbient
import androidx.compose.ui.platform.testTag
import androidx.compose.ui.res.colorResource
import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.text.font.FontFamily
import androidx.compose.ui.text.input.*
import androidx.compose.ui.unit.Dp
import androidx.compose.ui.unit.TextUnit
  
class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            GFGAppTheme {
                // A surface container using the 'background' color from the theme
                Surface(color = MaterialTheme.colors.background) {
                    // at below line we are calling
                      // our function for toolbar.
                    ToolbarWidget();
                }
            }
        }
    }
}
  
// @Preview function is use to see preview
// for our composable function in preview section.
@Preview(showBackground = true)
@Composable
fun DefaultPreview() {
    GFGAppTheme {
          // we are passing our composable
        // function to display its preview.
        ToolbarWidget();
    }
}
  
@Composable
fun ToolbarWidget() {
    // theme for our app.
    Scaffold(
        // below line we are 
        // creating a top bar.
        topBar = {
            TopAppBar(
                // in below line we are 
                // adding title to our top bar.
                title = {
                    // inside title we are 
                    // adding text to our toolbar.
                    Text(
                        text = "Geeks for Geeks",
                        // below line is use 
                        // to give text color.
                        color = Color.White
                    )
                },
                navigationIcon = {
                    // navigation icon is use
                    // for drawer icon.
                    IconButton(onClick = { }) {
                        // below line is use to
                        // specify navigation icon.
                        Icon(Icons.Filled.Menu)
                    }
                },
                // below line is use to give background color
                backgroundColor = colorResource(id = R.color.purple_200),
  
                // content color is use to give
                // color to our content in our toolbar.
                contentColor = Color.White,
  
                // below line is use to give
                // elevation to our toolbar.
                elevation = 12.dp
            )
        }, bodyContent = {
            // bodyContent()
        })
}

现在运行您的应用程序，并查看该应用程序的输出。

输出：

想要一个节奏更快，更具竞争性的环境来学习Android的基础知识吗?

单击此处前往由我们的专家精心策划的指南，以使您立即做好行业准备！