英文:
How to make rounded corner in top in jetpack compose
问题
我在@Composable
函数中使用了Scaffold
。在content = {
内,我使用了LazyColumn
。我想要将"Top Start"和"Top End"对齐到角落。类似这样:
期望的输出
我尝试了来自这里的代码片段,但没有成功。
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()
}
}
实际输出
英文:
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
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
答案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)
)
}
}
}
}
截图:
英文:
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:
答案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)
) { ... }
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论