小编Phi*_*hov的帖子

我想TextField在 Jetpack Compose 中自定义可组合项。我试图实现下图中的结果，但不知何故TextField有一些默认填充，我找不到如何更改其值。我想删除默认填充并自定义它

（右边的图像是我实现的结果。我画了一个边框，这样你就可以看到它有填充，顺便说一句，下面的TextField只是Text可组合项，它们不是TextFields）

下面是我的TextField代码

TextField(
    value = "",
    onValueChange = {},
    modifier = Modifier
        .weight(1F)
        .padding(0.dp)
        .border(width = 1.dp, color = Color.Red),
    placeholder = {
        Text(
            "5555 5555 5555 5555", style = TextStyle(
                color = Color.Gray
            )
        )
    },
    colors = TextFieldDefaults.textFieldColors(
        backgroundColor = Color.Transparent,
        unfocusedIndicatorColor = Color.Transparent,
        focusedIndicatorColor = Color.Transparent
    ),
)

目前我正在使用 ModalBottomSheetLayout 来显示底部工作表。

不知道有没有办法监听底部页面关闭事件？

我正在编写一个纯粹的 Android 应用程序，并且我在每个屏幕中使用脚手架来实现 topBar、bottomBar、fab 等。

我的问题是我应该在每个屏幕中使用脚手架还是仅在 MainActivity 中使用？使用可组合项的最佳实践是什么？我可以在脚手架内部使用脚手架吗？

我进行了很多研究，但没有在任何地方找到答案，即使 jetpack compose 示例应用程序也没有提供有关在 jetpack compose 中构建应用程序的最佳实践的任何内容。请任何人帮助我。

我的代码看起来像这样

主要活动

@AndroidEntryPoint
class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        setContent {
            PasswordManagerApp()
        }
    }
}

@Composable
fun PasswordManagerApp() {


    val mainViewModel: MainViewModel = hiltViewModel()
    val navController = rememberNavController()
    val systemUiController = rememberSystemUiController()
    val scaffoldState = rememberScaffoldState()
    val coroutineScope = rememberCoroutineScope()

    Theme(
        darkTheme = mainViewModel.storedAppTheme.value
    ) {

        Scaffold(
            scaffoldState = scaffoldState,
            snackbarHost = { scaffoldState.snackbarHostState }
        ) {

            Box(modifier = Modifier) …

所以，我有mutableStateListOf一个viewModel：

var childTravellersList = mutableStateListOf<TravellersDetails>()

TravellersDetails是一个数据类，有一个名为 的字段error。

这childTravellersList在 UI 中使用为：

val list = remember{viewModel.childTravellersList}

LazyColumn(state = lazyColumnState) {
    itemsIndexed(list) { index, item ->
        SomeBox(show = if(item.error) true else false)
    }
  }

我在给定的TravellersDetailsviewModel更新中编写了一个函数：errorindexchildTravellersList

fun update(index){
    childTravellersList[index].error = true
}

因此，每当我调用此函数时，列表都应该更新。

这会更新列表，但不会触发 UI 重组。我哪里做错了？

我创建了一个盒子，在里面创建了图像和文本。我将框的内容对齐设置为TopStart但问题是文本相对于图像没有正确对齐。水平方向没问题，但垂直方向看起来有某种填充，但我尝试将填充设置为 0，但结果仍然相同。

即使将其从底部对齐，它也会设置比图像更高的像素

Box(contentAlignment = Alignment.TopStart,) {
    Image(painter = painterResource(id = R.drawable.ic_launcher_background), contentDescription = "",
        modifier = Modifier.size(125.dp),
        colorFilter = ColorFilter.tint(MaterialTheme.colors.onBackground)
    )

    Text(text = "4",
        color = MaterialTheme.colors.primary,
        fontSize = 44.sp,
        textAlign = TextAlign.Center
    )
}

我目前正在研究 Jetpack Compose，试图使用现代 Android 架构组件构建功能丰富的应用程序。传统上，我的应用程序中的每个屏幕（或导航单元）都是一个 Activity 或一个 Fragment，每个屏幕都有自己的生命周期绑定，但使用 Jetpack Compose 和 Compose Navigation 库，我会执行以下操作：

MainActivity.kt：

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            val navController = rememberNavController()

            NavHost(navController = navController, startDestination = "main") {
                composable("main") { MainScreen(navController) }
                // More composable calls
            }
        }
    }
}

哪里MainScreen只是一个可组合项。我的问题是：

• 此可组合项的“生命周期”相当于什么？假设我想在屏幕加载、销毁等时执行某些操作。这可能与我有更多屏幕和它们之间的导航的情况更相关
• 是否有某种方法可以在 Compose 和标准活动之间进行集成？也就是说，像您一样为屏幕定义活动，每个活动都是一个ComponentActivity并定义自己的可组合布局？是否因某种原因而灰心丧气？

我有一行在开头对齐文本，在结尾对齐图像。当我按下图像时，我会显示一个下拉菜单，但它出现在行的开头，我希望它出现在行的末尾。

我尝试在 Modifier 组件中使用 Alignment.centerEnd 但不起作用。

我怎样才能让弹出窗口出现在行的末尾？

@Composable
fun DropdownDemo(currentItem: CartListItems) {
    var expanded by remember { mutableStateOf(false) }
    Box(modifier = Modifier
        .fillMaxWidth()) {
        Text(modifier = Modifier.align(Alignment.TopStart),
            text = currentItem.type,
            color = colorResource(id = R.color.app_grey_dark),
            fontSize = 12.sp)
        Image(painter = painterResource(R.drawable.three_dots),
            contentDescription = "more options button",
            Modifier
                .padding(top = 5.dp, bottom = 5.dp, start = 5.dp)
                .align(Alignment.CenterEnd)
                .width(24.dp)
                .height(6.75.dp)
                .clickable(indication = null,
                    interactionSource = remember { MutableInteractionSource() },
                    onClick = {
                        expanded = true
                    }))
        DropdownMenu(
            expanded = expanded,
            onDismissRequest …

我有一个返回位图（“包含”二维码）的函数，我想在Image（可组合函数）中显示该位图，但我没有找到任何方法将位图转换为 aImageBitmap或仅显示该位图。

考虑这个例子。

对于身份验证，我们将使用 2 个屏幕 - 一个屏幕用于输入电话号码，另一个屏幕用于输入 OTP。

这两个屏幕都是用 Jetpack Compose 制作的，对于 NavGraph，我们使用组合导航。

另外我必须提到 DI 是由 Koin 处理的。

val navController = rememberNavController()

NavHost(navController) {
    navigation(
        startDestination = "phone_number_screen",
        route = "auth"
    ) {
        composable(route = "phone_number_screen") {
            // Get's a new instance of AuthViewModel
            PhoneNumberScreen(viewModel = getViewModel<AuthViewModel>())
        }

        composable(route = "otp_screen") {
            // Get's a new instance of AuthViewModel
            OTPScreen(viewModel = getViewModel<AuthViewModel>())
        }
    }
}

那么，我们如何在 Jetpack 组合 NavGraph 中的两个或多个可组合项之间共享相同的视图模型呢？

我尝试查找此内容，但找不到任何相关内容。

我想Column在垂直滚动的内部有一个“全尺寸” Box，但这种组合似乎不起作用。当我将verticalScroll(rememberScrollState())修饰符添加到 时Box，它似乎“禁用”了fillMaxSize()的修饰符Column

以下代码无法按预期工作：

MyTheme {
        Box(
            modifier = Modifier
                .fillMaxSize()
                .border(2.dp, Color.Green) //for visual effect only
                .verticalScroll(rememberScrollState())
        ) {
            Column(
                modifier = Modifier
                    .fillMaxSize()
                    .padding(2.dp)
                    .border(2.dp, Color.Red) //for visual effect only
            ) {
               //some content
            }
        }
}

预期结果：和Box（Column绿色和红色边框）填满整个屏幕。

实际结果： Box填满屏幕，但Column不填满高度

verticalScroll()但是，如果我从 中删除修饰符Box，我会得到预期的结果：

MyTheme {
        Box(
            modifier = Modifier
                .fillMaxSize()
                .border(2.dp, Color.Green) //for visual effect …