Android jetpack compose Material 3 无法对齐复选框文本

Question

我正在使用Android Studio Electric Eel | 2022.1.1.

我是个新手。我正在 Android 中尝试 Compose with Material3 中的复选框。我无法对齐复选框旁边的文本。请帮忙。这是代码和模拟器屏幕的屏幕截图。

1. 项目级别build.gradle firl

buildscript {
    ext {
        compose_version = '1.2.0'
    }
}// Top-level build file where you can add configuration options common to all sub-projects/modules.
plugins {
    id 'com.android.application' version '7.4.0' apply false
    id 'com.android.library' version '7.4.0' apply false
    id 'org.jetbrains.kotlin.android' version '1.7.0' apply false
}

2. 模块级别build.gradle

plugins {
    id 'com.android.application'
    id 'org.jetbrains.kotlin.android'
}

android {
    namespace 'com.example.test'
    compileSdk 33

    defaultConfig {
        applicationId "com.example.test"
        minSdk 27
        targetSdk 33
        versionCode 1
        versionName "1.0"

        testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"
        vectorDrawables {
            useSupportLibrary true
        }
    }

    buildTypes {
        release {
            minifyEnabled false
            proguardFiles getDefaultProguardFile('proguard-android-optimize.txt'), 'proguard-rules.pro'
        }
    }
    compileOptions {
        sourceCompatibility JavaVersion.VERSION_1_8
        targetCompatibility JavaVersion.VERSION_1_8
    }
    kotlinOptions {
        jvmTarget = '1.8'
    }
    buildFeatures {
        compose true
    }
    composeOptions {
        kotlinCompilerExtensionVersion '1.2.0'
    }
    packagingOptions {
        resources {
            excludes += '/META-INF/{AL2.0,LGPL2.1}'
        }
    }
}

dependencies {

    implementation 'androidx.core:core-ktx:1.7.0'
    implementation 'androidx.lifecycle:lifecycle-runtime-ktx:2.3.1'
    implementation 'androidx.activity:activity-compose:1.3.1'
    implementation "androidx.compose.ui:ui:$compose_version"
    implementation "androidx.compose.ui:ui-tooling-preview:$compose_version"
    implementation 'androidx.compose.material3:material3:1.0.0-alpha11'
    testImplementation 'junit:junit:4.13.2'
    androidTestImplementation 'androidx.test.ext:junit:1.1.5'
    androidTestImplementation 'androidx.test.espresso:espresso-core:3.5.1'
    androidTestImplementation "androidx.compose.ui:ui-test-junit4:$compose_version"
    debugImplementation "androidx.compose.ui:ui-tooling:$compose_version"
    debugImplementation "androidx.compose.ui:ui-test-manifest:$compose_version"
}

3. MainActivity.kt

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            TestTheme {
                // A surface container using the 'background' color from the theme
                Surface(
                    modifier = Modifier.fillMaxSize(),
                    color = MaterialTheme.colorScheme.background
                ) {
                    Test()
                }
            }
        }
    }
}

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun Test() {
    Row(
        horizontalArrangement = Arrangement.SpaceBetween,
        modifier = Modifier.padding(0.dp)
    ) {
        Row(
            modifier = Modifier.padding(3.dp)
        )
        {
            Checkbox(
                checked = true,
                onCheckedChange = { },
                modifier = Modifier.absoluteOffset((-12).dp, 0.dp)
            )
            Text(
                text = "Check me",
                fontWeight = FontWeight.Bold,
                fontSize = 18.sp,
                textAlign = TextAlign.Left
            )
        }

        TextButton(
            onClick = { },
            modifier = Modifier.padding(end = 0.dp)
        ) {
            Text(
                text = "Right text",
                fontWeight = FontWeight.Bold,
                fontSize = 18.sp,
                textAlign = TextAlign.Right
            )
        }


    }
}

我附上了模拟器屏幕的屏幕截图，以显示文本是如何对齐的。

问题：

1. 如何将文本“Check me”与复选框对齐。
2. 我怎样才能让它更靠近复选框。

请帮忙。

我尝试将文本放置在我的 Android Studio Material 3 项目中的复选框旁边。文本未与复选框对齐。

Answer 1

为此，您必须将文本垂直居中，下面是完整的代码。

@Composable
fun Test() {

    var selected by remember { mutableStateOf(false) }

    Row(
        modifier = Modifier
            .fillMaxWidth()
            .padding(10.dp),
    ) {

        Row(modifier = Modifier.weight(1f)) {
            Checkbox(checked = selected, onCheckedChange = { selected = it })
            Spacer(modifier = Modifier.width(5.dp))
            Text(
                text = "Check me",
                fontWeight = FontWeight.Bold,
                fontSize = 18.sp,
                color = Color.Black,
                modifier = Modifier.align(CenterVertically)
            )
        }
        Text(
            text = "Right text",
            fontSize = 18.sp,
            color = Color.Blue,
            modifier = Modifier.align(CenterVertically)
        )
    }

}

Answer 2

您可以按照本指南进行对齐：https://developer.android.com/jetpack/compose/layouts/alignment-lines

我正在研究你的代码，这就是我得到的：

fun Modifier.firstBaselineToTop(
    firstBaselineToTop: Dp
) = layout { measurable, constraints ->
    // Measure the composable
    val placeable = measurable.measure(constraints)

    // Check the composable has a first baseline
    check(placeable[FirstBaseline] != AlignmentLine.Unspecified)
    val firstBaseline = placeable[FirstBaseline]

    // Height of the composable with padding - first baseline
    val placeableY = firstBaselineToTop.roundToPx() - firstBaseline
    val height = placeable.height + placeableY
    layout(placeable.width, height) {
        // Where the composable gets placed
        placeable.placeRelative(0, placeableY)
    }
}

@Composable
fun Test() {
    Row(
        horizontalArrangement = Arrangement.Start,
        modifier = Modifier.padding(0.dp)
    ) {
        Row {
            Checkbox(
                checked = true,
                onCheckedChange = { },
                modifier = Modifier.absoluteOffset((-12).dp, 0.dp)
            )
            Text(
                text = "Check me",
                Modifier.padding(vertical =10.dp),
                fontWeight = FontWeight.Bold,
                fontSize = 18.sp,
                textAlign = TextAlign.Left
            )
        }
        TextButton(
            onClick = { },
            modifier = Modifier.padding(end = 0.dp)
        ) {
            Text(
                text = "Right text",
                Modifier.firstBaselineToTop(16.dp),
                fontWeight = FontWeight.Bold,
                fontSize = 18.sp,
                textAlign = TextAlign.Right
            )
        }
    }
}