晚安!我正在使用drawerContent和navigationIcon创建菜单,但是在Compose Jetpack中是否可以创建不带xml的Fragment()呢?如果有任何参考资料,我将不胜感激...
晚安!我正在使用drawerContent和navigationIcon创建菜单,但是在Compose Jetpack中是否可以创建不带xml的Fragment()呢?如果有任何参考资料,我将不胜感激...
使用Compose,你可以尝试一些不同的东西。
你可以使用导航组件(目前版本为1.0.0-alpha10
)在不同的组合间进行导航。
创建一个NavController
:
val navController = rememberNavController()
定义一个具有以下目标的NavHost
:
NavHost(
navController,
startDestination = "entry1"
) {
composable("entry1") { Entry1(..) }
composable("entry2") { Entry2(..) }
composable("entry3") { Entry3(..) }
}
sealed class Screen(val route: String, @StringRes val resourceId: Int) {
object Entry1 : Screen("entry1", R.string.entry1)
object Entry2 : Screen("entry2", R.string.entry2)
object Entry3 : Screen("entry3", R.string.entry3)
}
NavHost
更改为:NavHost(
navController,
startDestination = Screen.Entry1.route
) {
composable(Screen.Entry1.route) { Entry1(/*..*/) }
composable(Screen.Entry2.route) { Entry2(/*..*/) }
composable(Screen.Entry3.route) { Entry3(/*..*/) }
}
Scaffold
创建一个 drawerContent 和 navigationIcon,以打开菜单并导航到目标:val navController = rememberNavController()
val current by navController.currentBackStackEntryAsState()
val scaffoldState = rememberScaffoldState()
val scope = rememberCoroutineScope()
val items = listOf(
Screen.Entry1,
Screen.Entry2,
Screen.Entry3
)
Scaffold(
scaffoldState = scaffoldState,
drawerContent = {
//val currentRoute = current?.arguments?.getString(KEY_ROUTE)
val currentRoute = current?.destination?.route
items.forEach { screen ->
val selected = currentRoute == screen.route
val selectedColor = if (selected) Color.Yellow else Color.Transparent
Row(modifier = Modifier
.fillMaxWidth()
.height(32.dp)
.background(selectedColor)
.clickable {
scope.launch { scaffoldState.drawerState.close()}
navController.navigate(screen.route) {
popUpTo = navController.graph.startDestination
launchSingleTop = true
}
}) {
Text(stringResource(screen.resourceId))
}
}
},
topBar = {
TopAppBar(){
IconButton(
onClick = {
scope.launch { scaffoldState.drawerState.open() }
}
) {
Icon(Icons.Filled.Menu,"")
}
}
},
content = {
NavHost(
navController,
startDestination = Screen.Entry1.route
) {
composable(Screen.Entry1.route) { Entry1(/*..*/) }
composable(Screen.Entry2.route) { Entry2(/*..*/) }
composable(Screen.Entry3.route) { Entry3(/*..*/) }
}
}
)
where:
@Composable
fun Entry1(navigateTo: () -> Unit) {
Column(){
/*.....*/
}
}
它起作用了,我的类看起来像这样:
package com.example.quitanda
import android.app.Activity
import android.content.Intent
import android.os.Bundle
import android.widget.Toast
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.activity.result.contract.ActivityResultContracts
import androidx.compose.foundation.background
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.material.*
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Add
import androidx.compose.material.icons.filled.Menu
import androidx.compose.runtime.Composable
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.rememberCoroutineScope
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.platform.testTag
import androidx.compose.ui.res.colorResource
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import androidx.navigation.NavController
import androidx.navigation.compose.*
import com.google.accompanist.coil.CoilImage
import kotlinx.coroutines.CoroutineScope
import kotlinx.coroutines.launch
class MainActivity : ComponentActivity() {
private val responseState = mutableStateOf("")
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContent{
MainContent()
}
}
@Composable
private fun RecyclerView(){
Text(text = responseState.value)
LazyColumn(/*contentPadding = PaddingValues(horizontal = 16.dp, vertical = 8.dp),*/
modifier = Modifier.fillMaxSize()){
for(i in 0..50){
item {
Text(text = "Categoria 2, categoria 1",fontSize = 15.sp,
color=Color.White,modifier= Modifier
.background(
colorResource(id = R.color.red)
)
.fillMaxWidth(100f))
Row(verticalAlignment = Alignment.CenterVertically,
modifier= Modifier
.padding(bottom = 8.dp)
.fillMaxWidth(100f)
) {
Images("https://quitandadivino.com.br/_next/image?url=https%3A%2F%2Fapi.quitandadivino.com.br%2Fuploads%2Fabacaxi_perola_20afb6c700.jpg&w=300&q=75")
Column {
Text("Abacaxi",fontSize = 20.sp)
Text("Aprox. 0,185g/un",fontSize = 15.sp,color=Color.LightGray)
Text("R$ 120,00/UN",fontSize = 15.sp,color=Color.Red)
Text("R$ 120,00/KG",fontSize = 15.sp,color=Color.Red)
}
Column(modifier= Modifier
.fillMaxWidth(100f)
.padding(5.dp)
,horizontalAlignment = Alignment.End) {
Button(
onClick = {},
colors = ButtonDefaults.buttonColors(
backgroundColor = Color.Red,
contentColor = Color.White)
) {
Text(text = stringResource(id = R.string.comprar))
}
}
}
Text(text = " ",fontSize = 15.sp,
modifier = Modifier
.padding(bottom = 2.dp) // margin
.fillMaxWidth(100f)
.background(colorResource(id = R.color.red))
)
}
}
}
}
private fun onPressView(){
Toast.makeText(this,"Testar",Toast.LENGTH_LONG).show();
}
@Composable
private fun Images(url:String){
Card(
modifier = Modifier
.size(110.dp)
.testTag("circle")
.fillMaxSize()
.clickable(onClick = { onPressView() })
.padding(10.dp),
shape = CircleShape,
elevation = 2.dp,
) {
CoilImage(
data = url,
contentDescription = "Abacaxi",
fadeIn = true
)
}
}
@Composable
private fun MainContent(){
val scaffoldState = rememberScaffoldState()
val scope = rememberCoroutineScope()
val navController = rememberNavController()
Scaffold(
topBar = {
TopBar(scope,scaffoldState)
},
content={
NavHost(
navController,
startDestination = Screen.Entry1.route
) {
composable(Screen.Entry1.route) { Entry1() }
composable(Screen.Entry2.route) { Entry2() }
composable(Screen.Entry3.route) { Entry3() }
}
},
floatingActionButton = { MainFab() },
drawerContent = {
DrawerContent(scope,scaffoldState,navController)
},
scaffoldState = scaffoldState
)
}
@Composable
private fun DrawerContent(scope: CoroutineScope,scaffoldState:ScaffoldState
,navController: NavController
){
val items = listOf(
Screen.Entry1,
Screen.Entry2,
Screen.Entry3
)
Text("Drawer content", style = MaterialTheme.typography.h5)
items.forEach { screen ->
Row(modifier = Modifier
.fillMaxWidth()
.height(32.dp)
.clickable {
scope.launch { scaffoldState.drawerState.close() }
navController.navigate(screen.route) {
popUpTo = navController.graph.startDestination
launchSingleTop = true
}
}) {
Text(stringResource(screen.resourceId))
}
}
}
@Composable
private fun TopBar(scope: CoroutineScope,scaffoldState:ScaffoldState){
TopAppBar(title={
Text(text = stringResource(id = R.string.app_name))
},
backgroundColor = colorResource(id = R.color.green),
contentColor = Color.White,
navigationIcon ={
IconButton(
onClick = {scope.launch { scaffoldState.drawerState.open() } }
) {
Icon(imageVector = Icons.Default.Menu, contentDescription ="Menu" )
}
}
)
}
@Composable
private fun MainFab () {
FloatingActionButton(onClick = {showAddForm()}) {
Icon(imageVector = Icons.Filled.Add, contentDescription = "Adicionar")
}
}
private var resultLauncher = registerForActivityResult(ActivityResultContracts.StartActivityForResult()) { result ->
if (result.resultCode == Activity.RESULT_OK) {
// There are no request codes
val response = result.data?.getParcelableExtra<AddUserState>("user_state")
responseState.value = response.toString()
}
}
private fun showAddForm() {
val intent = Intent(this, FormActivity::class.java)
resultLauncher.launch(intent)
}
@Composable
private fun Entry1(){
Text(text = stringResource(id = R.string.entry1))
RecyclerView()
}
@Composable
private fun Entry2(){
Text(text = stringResource(id = R.string.entry2))
}
@Composable
private fun Entry3(){
Text(text = stringResource(id = R.string.entry3))
}
}
@Gabriele Mariotti 非常感谢你