如何在Jetpack Compose中使顶部具有圆角？

huangapple
go评论128阅读模式
英文:

How to make rounded corner in top in jetpack compose

问题

我在@Composable函数中使用了Scaffold。在content = {内，我使用了LazyColumn。我想要将"Top Start"和"Top End"对齐到角落。类似这样：

期望的输出

如何在Jetpack Compose中使顶部具有圆角？

我尝试了来自这里的代码片段，但没有成功。

package com.example.scrollcompose

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Favorite
import androidx.compose.material.icons.filled.Menu
import androidx.compose.material3.*
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.text.style.TextOverflow
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import com.example.scrollcompose.ui.theme.ScrollComposeTheme

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            ScrollComposeTheme {
                // 使用主题中的"background"颜色的表面容器
                GreetingView()
            }
        }
    }
}

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun GreetingView() {
    val scrollBehavior = TopAppBarDefaults.exitUntilCollapsedScrollBehavior()
    Scaffold(
        topBar = {
            MediumTopAppBar(
                title = {
                    Text(
                        "Medium TopAppBar",
                        maxLines = 1,
                        overflow = TextOverflow.Ellipsis
                    )
                },
                navigationIcon = {
                    IconButton(onClick = { /* 做某事 */ }) {
                        Icon(
                            imageVector = Icons.Filled.Menu,
                            contentDescription = "本地化描述"
                        )
                    }
                },
                actions = {
                    IconButton(onClick = { /* 做某事 */ }) {
                        Icon(
                            imageVector = Icons.Filled.Favorite,
                            contentDescription = "本地化描述"
                        )
                    }
                },
                scrollBehavior = scrollBehavior
            )
        },
        content = { innerPadding ->
            LazyColumn(
                modifier = Modifier
                    .clip(shape = RoundedCornerShape(15.dp, 15.dp, 0.dp, 0.dp))
                    .background(Color.Red),
                contentPadding = innerPadding,
                verticalArrangement = Arrangement.spacedBy(8.dp)
            ) {
                val list = (0..40).map { it.toString() }
                items(count = list.size) {
                    Text(
                        text = list[it],
                        style = MaterialTheme.typography.bodyLarge,
                        modifier = Modifier
                            .fillMaxWidth()
                            .padding(horizontal = 16.dp)
                    )
                }
            }
        }
    )
}

@Preview(showBackground = true)
@Composable
fun DefaultPreview() {
    ScrollComposeTheme {
        GreetingView()
    }
}

实际输出

如何在Jetpack Compose中使顶部具有圆角？

英文:

I am using Scaffold in my @Composable function. Inside content = { I am using LazyColumn. I want the Top Start and Top End to corner. Something like this

Expected Output

如何在Jetpack Compose中使顶部具有圆角？

I tried this piece of code from here, but it didn't work.

package com.example.scrollcompose
import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Favorite
import androidx.compose.material.icons.filled.Menu
import androidx.compose.material3.*
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.text.style.TextOverflow
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import com.example.scrollcompose.ui.theme.ScrollComposeTheme
class MainActivity : ComponentActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContent {
ScrollComposeTheme {
// A surface container using the 'background' color from the theme
GreetingView()
}
}
}
}
@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun GreetingView() {
val scrollBehavior = TopAppBarDefaults.exitUntilCollapsedScrollBehavior()
Scaffold(
topBar = {
MediumTopAppBar(
title = {
Text(
"Medium TopAppBar",
maxLines = 1,
overflow = TextOverflow.Ellipsis
)
},
navigationIcon = {
IconButton(onClick = { /* doSomething() */ }) {
Icon(
imageVector = Icons.Filled.Menu,
contentDescription = "Localized description"
)
}
},
actions = {
IconButton(onClick = { /* doSomething() */ }) {
Icon(
imageVector = Icons.Filled.Favorite,
contentDescription = "Localized description"
)
}
},
scrollBehavior = scrollBehavior
)
},
content = { innerPadding ->
LazyColumn(
modifier = Modifier
.clip(shape = RoundedCornerShape(15.dp, 15.dp, 0.dp, 0.dp))
.background(Color.Red),
contentPadding = innerPadding,
verticalArrangement = Arrangement.spacedBy(8.dp)
) {
val list = (0..40).map { it.toString() }
items(count = list.size) {
Text(
text = list[it],
style = MaterialTheme.typography.bodyLarge,
modifier = Modifier
.fillMaxWidth()
.padding(horizontal = 16.dp)
)
}
}
}
)
}
@Preview(showBackground = true)
@Composable
fun DefaultPreview() {
ScrollComposeTheme {
GreetingView()
}
}

Actual Output

如何在Jetpack Compose中使顶部具有圆角？

答案1

得分: 12

你必须使用padding()修饰符，而不是contentPadding属性：

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun Greeting(name: String) {
    Scaffold(
        topBar = { MediumTopAppBar(title = { Text("Test") }) }
    ) { innerPadding ->
        LazyColumn(
            modifier = Modifier
                .padding(innerPadding)
                .clip(shape = RoundedCornerShape(15.dp, 15.dp, 0.dp, 0.dp))
                .background(Color.Red),
            verticalArrangement = Arrangement.spacedBy(8.dp)
        ) {
            val list = (0..40).map { it.toString() }
            items(count = list.size) {
                Text(
                    text = list[it],
                    style = MaterialTheme.typography.bodyLarge,
                    modifier = Modifier
                        .fillMaxWidth()
                        .padding(horizontal = 16.dp)
                )
            }
        }
    }
}

截图：

带圆角的LazyColumn

英文:

You must use padding() modifier instead of contentPadding attribute:

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun Greeting(name: String) {
Scaffold(
topBar = { MediumTopAppBar(title={Text("Test")})  }
) { innerPadding ->
LazyColumn(
modifier = Modifier
.padding(innerPadding)
.clip(shape = RoundedCornerShape(15.dp, 15.dp, 0.dp, 0.dp))
.background(Color.Red),
//contentPadding = innerPadding,
verticalArrangement = Arrangement.spacedBy(8.dp)
) {
val list = (0..40).map { it.toString() }
items(count = list.size) {
Text(
text = list[it],
style = MaterialTheme.typography.bodyLarge,
modifier = Modifier
.fillMaxWidth()
.padding(horizontal = 16.dp)
)
}
}
}
}

Screenshot:

LazyColumn with rounded corners

答案2

得分: 1

LazyColumn(modifier = Modifier
       .background(Color.Red)
        .clip(shape = RoundedCornerShape(15.dp, 15.dp, 0.dp, 0.dp)),
              contentPadding = innerPadding,
              verticalArrangement = Arrangement.spacedBy(8.dp)
) { ... }
英文:

Example:

LazyColumn(modifier = Modifier
.background(Color.Red)
.clip(shape = RoundedCornerShape(15.dp, 15.dp, 0.dp, 0.dp)),
contentPadding = innerPadding,
verticalArrangement = Arrangement.spacedBy(8.dp)
) { ... }

huangapple
  • 本文由 发表于 2023年2月27日 07:40:17
  • 转载请务必保留本文链接：https://go.coder-hub.com/75575695.html
  • android
  • android-jetpack
  • android-jetpack-compose
  • android-jetpack-compose-material3
  • kotlin
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定