Jetpack Compose中AC及退格按钮布局问题求助

要实现你期望的计算器布局，推荐使用LazyVerticalGrid来灵活控制按钮的位置和跨度，替代嵌套Row的方式，这样能轻松加入AC和退格按钮并调整布局结构。

修改后的完整代码 #

import androidx.compose.foundation.background
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.lazy.grid.GridCells
import androidx.compose.foundation.lazy.grid.GridItemSpan
import androidx.compose.foundation.lazy.grid.LazyVerticalGrid
import androidx.compose.material3.Button
import androidx.compose.material3.ButtonDefaults
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp

@Composable
fun UnitConverter(modifier: Modifier = Modifier) {
    Box(
        modifier
            .background(Color(0xFF252323))
            .fillMaxSize()
    ) {
        LazyVerticalGrid(
            columns = GridCells.Fixed(3), // 固定3列布局
            modifier = Modifier.fillMaxSize(),
            contentPadding = PaddingValues(16.dp), // 内边距
            horizontalArrangement = Arrangement.spacedBy(16.dp), // 水平间距
            verticalArrangement = Arrangement.spacedBy(16.dp) // 垂直间距
        ) {
            // AC按钮占2列，退格占1列
            item(span = { GridItemSpan(2) }) {
                CalculatorButton(text = "AC", onClick = {})
            }
            item {
                CalculatorButton(text = "←", onClick = {})
            }
            // 数字行：7、8、9
            item { CalculatorButton(text = "7", onClick = {}) }
            item { CalculatorButton(text = "8", onClick = {}) }
            item { CalculatorButton(text = "9", onClick = {}) }
            // 数字行：4、5、6
            item { CalculatorButton(text = "4", onClick = {}) }
            item { CalculatorButton(text = "5", onClick = {}) }
            item { CalculatorButton(text = "6", onClick = {}) }
            // 数字行：1、2、3
            item { CalculatorButton(text = "1", onClick = {}) }
            item { CalculatorButton(text = "2", onClick = {}) }
            item { CalculatorButton(text = "3", onClick = {}) }
            // C按钮占1列，0占2列，小数点占1列
            item { CalculatorButton(text = "C", onClick = {}) }
            item(span = { GridItemSpan(2) }) {
                CalculatorButton(text = "0", onClick = {})
            }
            item { CalculatorButton(text = ".", onClick = {}) }
        }
    }
}

@Composable
fun CalculatorButton(text: String, onClick: () -> Unit) {
    Button(
        onClick = onClick,
        modifier = Modifier
            .fillMaxWidth()
            .aspectRatio(1f), // 保持按钮为正方形
        colors = ButtonDefaults.buttonColors(
            containerColor = Color(0xFF3C3C3C),
            contentColor = Color.White
        )
    ) {
        Text(
            text = text,
            fontSize = 24.sp,
            fontWeight = FontWeight.Medium
        )
    }
}

关键调整点 #

• 网格布局替代嵌套Row：用LazyVerticalGrid实现3列网格，通过GridItemSpan控制按钮的列跨度（比如AC和0各占2列），完美匹配期望的布局结构。
• 间距优化：添加contentPadding和spacedBy属性，让按钮之间保持合适的间距，避免布局拥挤。
• 按钮自适应：给CalculatorButton添加aspectRatio(1f)，确保所有按钮都是正方形，视觉更统一。
• 全屏布局：将外层Box的fillMaxWidth改为fillMaxSize，让计算器布局占满整个屏幕。

内容的提问来源于stack exchange，提问作者Ash Kecthum