FillMaxHeight、填充和包装内容在 JetpackCompose 中的行为不符合预期

Question

我进入了 Jetpack compose，但很难找到正常屏幕的示例。每个人都只是使用脚手架并收工。使用 fillMaxSize 应该正是这样做的，有人可以解释可组合如何继承它们的大小吗？具体最顶层的可组合项（根可组合项）？

@Composable
fun MainContent() {
    Surface(modifier = Modifier.fillMaxSize()) {
        Column() {
            SearchBox()
            CurrentWeather()
            WindAndHumidityBox()
        }
    }
}

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

紫色部分也在使用此代码。

    Surface(
        modifier = Modifier
            .padding(40.dp).wrapContentHeight(), elevation = 3.dp, shape = RoundedCornerShape(8.dp),
        color = MaterialTheme.colors.primarySurface
    ) {

在 XML 中，我们可以使用包装内容并对其应用填充，这似乎不是 compose 的情况？我正在尝试做这样的事情

编辑：整个撰写文件


@Composable
private fun Content() {
    Column(modifier = Modifier.fillMaxSize()) {
        SearchBox()
        CurrentWeather()
        WindAndHumidityBox()
    }
}

@Composable
fun WindAndHumidityBox() {
    Surface(
        modifier = Modifier
            .padding(40.dp)
            .wrapContentHeight(), elevation = 3.dp, shape = RoundedCornerShape(8.dp),
        color = MaterialTheme.colors.primarySurface
    ) {

        Row {
            Row(modifier = Modifier.align(Alignment.CenterVertically)) {
                Image(
                    painter = painterResource(id = R.drawable.day_clear),
                    contentDescription = "humidity"
                )
                Text(
                    text = "Precipitation \n 10%", fontWeight = FontWeight.Bold, fontSize = 20.sp,
                    modifier = Modifier.align(Alignment.CenterVertically)
                )
            }

            Row(modifier = Modifier.align(Alignment.CenterVertically)) {
                Image(
                    painter = painterResource(id = R.drawable.day_clear),
                    contentDescription = "humidity"
                )
                Text(
                    text = "Precipitation \n 10%", fontWeight = FontWeight.Bold, fontSize = 20.sp,
                    modifier = Modifier.align(Alignment.CenterVertically)
                )
            }
        }

    }
}

@Composable
private fun CurrentWeather() {
    Box(modifier = Modifier.fillMaxWidth()) {
        Column(Modifier.align(Alignment.Center)) {

            Column(modifier = Modifier.padding(bottom = 20.dp)) { // location and time/date
                Row(modifier = Modifier.align(Alignment.CenterHorizontally)) {
                    Icon(
                        painter = painterResource(id = R.drawable.ic_location),
                        contentDescription = "location"
                    )
                    Text(
                        text = "London", fontWeight = FontWeight.Bold, fontSize = 20.sp,
                        modifier = Modifier.align(Alignment.CenterVertically)
                    )
                }

                Text(text = "Thu 4 December 8:41 am")

            }


            Row(Modifier.align(Alignment.CenterHorizontally)) {
                Image(
                    painterResource(id = R.drawable.day_clear),
                    modifier = Modifier.align(alignment = Alignment.CenterVertically),
                    contentDescription = "current weather image displaying the current weather"
                )
                Text(
                    text = "27", fontSize = 40.sp, modifier = Modifier
                        .padding(5.dp)
                        .align(Alignment.Top)
                )
            }

            Text(
                text = "Sunny",
                modifier = Modifier
                    .align(Alignment.CenterHorizontally)
                    .padding(top = 20.dp),
                fontWeight = FontWeight.Bold,
                fontSize = 20.sp
            )
        }
    }
}

@Composable
private fun SearchBox() {
    Box {
        var textValue by remember { mutableStateOf("") }

        val context = LocalContext.current

        OutlinedTextField(value = textValue,
            leadingIcon = {
                Icon(
                    painterResource(id = R.drawable.ic_baseline_search_24),
                    "search"
                )
            },
            label = { Text("Search For A City") },
            modifier = Modifier
                .padding(16.dp)
                .fillMaxWidth(),
            keyboardOptions = KeyboardOptions(
                imeAction = ImeAction.Search,
                keyboardType = KeyboardType.Text
            ),
            keyboardActions = KeyboardActions(
                onSearch = {
                    hideKeyboard(context = context)

                }),
            onValueChange = { text ->
                textValue = text
            }
        )
    }
}

Answer 1

您使用的父容器过多。
只需使用：

Surface(
      color = MaterialTheme.colors.background,
      modifier = Modifier.fillMaxSize()
){
  Column(){
     WindAndHumidityBox()
  }
}

然后您可以通过多种方式实现紫色部分。
特别检查 Intrinsic measurements.

例如：

Surface(
    modifier = Modifier
        .padding(horizontal = 16.dp)   
        .fillMaxWidth(),
    elevation = 3.dp,
    shape = RoundedCornerShape(8.dp),
    color = MaterialTheme.colors.primarySurface
) {

    Row(
        Modifier.padding(40.dp),  //Padding inside the Row
        horizontalArrangement = Arrangement.Center
    ) {
        
        Row(modifier = Modifier
            .align(Alignment.CenterVertically)
            .height(IntrinsicSize.Min) //Intrinsic measurements to center the icon vertically
        ) {
            Image(
                modifier = Modifier.fillMaxHeight(),
                //..
            )
            //...
        }
        //...
    }
}

FillMaxHeight、填充和包装内容在 JetpackCompose 中的行为不符合预期

FillMaxHeight, padding and wrapping content not behaving as expected in JetpackCompose

user-interface

android

kotlin

android-jetpack-compose