ios SwiftUI标题/标题文本背景颜色屏幕宽

nmpmafwu  于 2023-10-21  发布在  iOS
关注(0)|答案(2)|浏览(149)

我想设置“塞巴斯蒂安最喜欢的东西”的背景颜色,以涵盖整个区域。目前它看起来像这样,我想覆盖白色空间。

我的代码如下:

var body: some View {
    VStack{
        GridRow{
            Text("SEBASTIAN'S FAVORITE STUFF")
                .lineLimit(1)
                .padding(10)
                .font(.system(size: 500))
                .minimumScaleFactor(0.01)
                .colorInvert()
        }
        .background(Color(red: 0.18 , green: 0.59 , blue: 0.65 ))
        HStack{
            ScrollView{
                Grid{

我需要做什么调整,使它填充区域,而不仅仅是文本背景?

xfb7svmp

xfb7svmp1#

如果将.frame(maxWidth: .infinity)链接到Text上作为最后一个修改器,则背景色应延伸到左右边缘。

r8uurelv

r8uurelv2#

GridRow应该是Grid的子节点。所以在这种情况下,我不会使用GridRow,而只使用Text本身。
然后,您需要做的就是强制文本使用全宽。由于背景将接触安全区域的边缘,因此它也将延伸到安全区域中。这是因为您使用的是background(_:ignoresSafeAreaEdges:)(带圆括号)。ignoresSafeAreaEdges的默认参数是Edge.Set.all
就像这样:

VStack{
    Text("SEBASTIAN'S FAVORITE STUFF") // not nested in a GridRow any more
        .lineLimit(1)
        .padding(10)
        .font(.system(size: 500))
        .minimumScaleFactor(0.01)
        .colorInvert()
        .frame(maxWidth: .infinity) // added
        .background(Color(red: 0.18 , green: 0.59 , blue: 0.65 ))
    HStack {
        ScrollView {
            Grid{

如果你想填满整个屏幕背景,那么你可以把背景上移一级,放在VStack后面。Text上不再需要maxWidth。在VStack上也不需要它,因为ScrollView将强制VStack填充所有可用空间(ScrollView是贪婪的)。

VStack{
    Text("SEBASTIAN'S FAVORITE STUFF")
        .lineLimit(1)
        .padding(10)
        .font(.system(size: 500))
        .minimumScaleFactor(0.01)
        .colorInvert()
    HStack {
        // as before
    }
}
.background(Color(red: 0.18 , green: 0.59 , blue: 0.65 ))

如果这仍然留下一些差距,那么你需要看看下一个父母,等等。

相关问题