SwiftUI 样式（列表颜色和 UIPageControl 高度）

Question

亲爱的，

给出以下视图：

import SwiftUI
import WebKit

var regions = ["Bayern","Brandenburg","Hamburg","Hessen","Saarland"]
var tabs = ["home","menu_book","photo","audio","movie","view_cozy"]

struct ContentView: View {
    
    @State var selectedRegion: Int = 0
    
    var body: some View {
        NavigationView{
            ScrollView(.horizontal, showsIndicators: true) {
                        LazyHStack {
                            PageView().padding(0)
                        }
            }
            .navigationBarTitleDisplayMode(.inline)
            .toolbar{
                ToolbarItem(placement: .navigationBarLeading) {
                    Text("MyApp")
                }
                ToolbarItem(placement: .principal) {
                    Button(action:{},label :{Text("Mail")})
                }
                ToolbarItem(placement: .navigationBarTrailing) {
                    Picker("Select", selection: $selectedRegion) {
                        ForEach(regions, id: \.self) { region in
                            Text(region)
                        }
                    }
                    .pickerStyle(MenuPickerStyle())
                }
            }
        }
    }
}

struct PageView: View {
    
    var body: some View {
        
        TabView {
//            Button(action: {},label: {Text("Test Button")})
            Image("home")
                .resizable()
                .aspectRatio(contentMode: .fit)
                .padding(0)
                .frame(width:20,height: 20)
                .border(Color.blue)
            ForEach(tabs, id: \.self) { tab in
                List {
                    ForEach(0..<20) { btn in
                        Button(
                            action: {
                                print("Button clicked : Tab\(tab)_btn_\(btn)")
                        },
                            label: {
                            Text("Tab\(tab)_btn_\(btn)").font(.system(size: 12))
                        })
                        .background(SwiftUI.Color.pink)
                    }
                }
                .background(SwiftUI.Color.yellow)
                .tabItem {
                    Image(tab)
                        .resizable()
                        .aspectRatio(contentMode: .fit)
                        .padding(0)
                        .frame(width:20,height: 20)
                        .border(Color.blue)
//                    Text(tab)
                }
            }
        }
        .frame(width: UIScreen.main.bounds.width, height: UIScreen.main.bounds.height)
        .tabViewStyle(PageTabViewStyle())
        .background(SwiftUI.Color.orange)
    }
    
    init() {
        UIPageControl.appearance().currentPageIndicatorTintColor = .red
        UIPageControl.appearance().pageIndicatorTintColor = .blue
        UIPageControl.appearance().backgroundColor = .green
//        UIPageControl.appearance().transform = CGAffineTransform.init(scaleX: 0.8, y: 0.8)
        
//        UITabBar.appearance().barTintColor = .orange
    }
}

我希望能够将列表的背景颜色设置为特定颜色（比如说橙色）并降低页面指示器（底部包含所有图标的栏）的高度。

我尝试过的内容可以在代码注释中看到。无论如何，无论我做什么，我最终都会得到以下观点： 我们的想法是，在第二个选项卡（带有主页图标的选项卡）上，列表背景应具有与第一个选项卡相同的背景颜色。 图标是 SVG（至少我在 Xcode 中导入的是 SVG）。如何减小底部栏的大小？ （图标好像太大了）

感谢您的任何提示。

Answer 1

我在使用 iPhone 14 模拟器和 iOS 17 让代码以类似于屏幕截图的方式运行时遇到了相当大的困难。这些更改有所帮助：

1. 移除

   ScrollView

   周围的

   LazyHStack

   和

   PageView

   ：

NavigationView {
//    ScrollView(.horizontal, showsIndicators: true) {
//        LazyHStack {
            PageView() //.padding(0)
//        }
//    }

2. 不要使用

   UIScreen.main.bounds

   设置框架宽度和高度（无论如何，它已被弃用）。

//    .frame(width: UIScreen.main.bounds.width, height: UIScreen.main.bounds.height)

3. 用

   ZStack

   将主页变成整页，并使用颜色填充所有可用空间：

ZStack {
    SwiftUI.Color.orange
    Image("home")
        .resizable()
        .aspectRatio(contentMode: .fit)
        // .padding(0)
        .frame(width:20, height: 20)
        .border(Color.blue)
}

这样就不需要在

TabView

上设置背景，也就是说导航栏不会得到橙色背景。

//    .background(SwiftUI.Color.orange)

控制台还报告了

Picker

的问题，因为：

选择“0”无效并且没有关联标签

但我没有尝试解决这个问题。

经过上述更改，它看起来像这样（使用即兴图像）：

有趣的是，标签栏中的图像很小，而且栏本身的高度也很小。我正在使用标准系统映像，实际上，我找不到使它们更大的方法。因此，也许您需要尝试重新调整 .svg 图标的自然大小。否则，我认为您对页面指示器的显示方式没有太多控制权。

如果使用

.tabViewStyle(.automatic)

，你会得到更大的图像，但实际上只显示3张图像，其余的都在“更多...”菜单中：

对于列表的背景，您可以使用

.listRowBackground

为列表行设置背景颜色，并且可以使用

List

隐藏

.scrollContentBackground(.hidden)

的灰色背景。当这些变化全部组合起来时，

List

项目看起来像这样：

List {
    ForEach(0..<20) { btn in
        // content as before
    }
    .listRowBackground(Color.yellow)
}
.scrollContentBackground(.hidden)
.background(Color.yellow)

这是我最终得到的完全改编的代码，以供参考。

struct PageView: View {
//    let tabs = ["home","menu_book","photo","audio","movie","view_cozy"]
    let tabs = ["house.fill", "book.fill", "photo", "headphones", "film", "fireplace"]

    var body: some View {

        TabView {
//            Button(action: {},label: {Text("Test Button")})
            ZStack {
                SwiftUI.Color.orange
                Image(systemName: "house.fill")
                    .resizable()
                    .aspectRatio(contentMode: .fit)
                    .padding(0)
                    .frame(width:20, height: 20)
                    .border(Color.blue)
            }
            ForEach(tabs, id: \.self) { tab in
                List {
                    ForEach(0..<20) { btn in
                        Button(
                            action: {
                                print("Button clicked : Tab\(tab)_btn_\(btn)")
                            },
                            label: {
                                Text("Tab\(tab)_btn_\(btn)").font(.system(size: 12))
                            })
                        .background(SwiftUI.Color.pink.opacity(0.2))
                    }
                    .listRowBackground(Color.yellow)
                }
                .scrollContentBackground(.hidden)
                .background(SwiftUI.Color.yellow)
                .tabItem {
                    Image(systemName: tab)
                        .resizable()
                        .scaledToFit()
//                        .aspectRatio(contentMode: .fit)
                        .frame(width: 50, height: 50)
                        .border(Color.blue)
//                    Text(tab)
                }
            }
        }
        .tabViewStyle(.page)
    }

    init() {
        UIPageControl.appearance().currentPageIndicatorTintColor = .red
        UIPageControl.appearance().pageIndicatorTintColor = .blue
        UIPageControl.appearance().backgroundColor = .green
//        UIPageControl.appearance().transform = CGAffineTransform.init(scaleX: 0.8, y: 0.8)

//        UITabBar.appearance().barTintColor = .orange
    }
}

struct ContentView: View {
    let regions = ["Bayern", "Brandenburg", "Hamburg", "Hessen", "Saarland"]

    @State var selectedRegion: Int = 0

    var body: some View {
        NavigationView {
            PageView()
                .navigationBarTitleDisplayMode(.inline)
                .toolbar {
                    ToolbarItem(placement: .navigationBarLeading) {
                        Text("MyApp")
                    }
                    ToolbarItem(placement: .principal) {
                        Button {} label: {
                            Text("Mail")
                        }
                    }
                    ToolbarItem(placement: .navigationBarTrailing) {
                        Picker("Select", selection: $selectedRegion) {
                            ForEach(regions, id: \.self) { region in
                                Text(region)
                            }
                        }
                        .pickerStyle(MenuPickerStyle())
                    }
                }
        }
    }
}

希望您能从中找到有用的东西。