SwiftUI中List背景色设置与UIPageControl高度调整问题

一、统一所有页面背景色（含List） #

你的问题里首屏（home图标页）和List页面背景不一致，核心原因是List默认带有系统原生背景，直接添加.background无法完全覆盖，同时首屏的Image也没设置背景。按以下步骤修改：

1. 在PageView的init方法中添加UITableView背景清除设置，让List能继承父视图背景：

UITableView.appearance().backgroundColor = .clear
UITableViewCell.appearance().backgroundColor = .clear

2. 给首屏的Image添加橙色背景：

Image("home")
    .resizable()
    .aspectRatio(contentMode: .fit)
    .frame(width:20,height: 20)
    .border(Color.blue)
    .background(Color.orange) // 新增背景设置

3. 将List的.background(Color.yellow)改为.background(Color.orange)，确保List页面背景统一。

二、缩小底部分页指示器（UIPageControl）的高度与图标 #

分页图标过大、高度无法调整的问题，需要通过UIPageControl的外观属性修改：

1. 先封装图片缩放工具方法，将图标缩放到目标尺寸：

func resizeImage(named: String, size: CGSize) -> UIImage? {
    guard let image = UIImage(named: named) else { return nil }
    UIGraphicsBeginImageContextWithOptions(size, false, UIScreen.main.scale)
    image.draw(in: CGRect(origin: .zero, size: size))
    let resizedImage = UIGraphicsGetImageFromCurrentImageContext()
    UIGraphicsEndImageContext()
    return resizedImage
}

2. 在PageView的init方法中，设置分页指示器的图标、尺寸和高度：

// 设置分页图标大小（示例设为16x16）
let iconSize = CGSize(width: 16, height: 16)
// 给每个tab页面设置缩小后的图标
tabs.forEach { tab in
    if let image = resizeImage(named: tab, size: iconSize) {
        UIPageControl.appearance().setPreferredIndicatorImage(image, forPage: tabs.firstIndex(of: tab)! + 1)
    }
}
// 给第一个home页面设置图标
if let homeImage = resizeImage(named: "home", size: iconSize) {
    UIPageControl.appearance().setPreferredIndicatorImage(homeImage, forPage: 0)
}
// 缩小分页指示器整体高度（y轴缩放0.6）
UIPageControl.appearance().transform = CGAffineTransform(scaleX: 1, y: 0.6)
// 调整图标间距（可选）
UIPageControl.appearance().spacing = 8

修改后的完整代码 #

import SwiftUI
import WebKit

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

// 图片缩放工具方法
func resizeImage(named: String, size: CGSize) -> UIImage? {
    guard let image = UIImage(named: named) else { return nil }
    UIGraphicsBeginImageContextWithOptions(size, false, UIScreen.main.scale)
    image.draw(in: CGRect(origin: .zero, size: size))
    let resizedImage = UIGraphicsGetImageFromCurrentImageContext()
    UIGraphicsEndImageContext()
    return resizedImage
}

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 {
            // 首屏：添加橙色背景
            Image("home")
                .resizable()
                .aspectRatio(contentMode: .fit)
                .frame(width:20,height: 20)
                .border(Color.blue)
                .background(Color.orange)
            
            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(Color.pink)
                    }
                }
                // 修改List背景为橙色
                .background(Color.orange)
                .tabItem {
                    Image(tab)
                        .resizable()
                        .aspectRatio(contentMode: .fit)
                        .frame(width:20,height: 20)
                        .border(Color.blue)
                }
            }
        }
        .frame(width: UIScreen.main.bounds.width, height: UIScreen.main.bounds.height)
        .tabViewStyle(PageTabViewStyle())
        .background(Color.orange)
    }
    
    init() {
        // 清除List默认背景，让橙色背景生效
        UITableView.appearance().backgroundColor = .clear
        UITableViewCell.appearance().backgroundColor = .clear
        
        // 设置分页指示器颜色
        UIPageControl.appearance().currentPageIndicatorTintColor = .red
        UIPageControl.appearance().pageIndicatorTintColor = .blue
        UIPageControl.appearance().backgroundColor = .green
        
        // 设置分页图标大小和指示器高度
        let iconSize = CGSize(width: 16, height: 16)
        // 给每个tab页面设置缩小后的图标
        tabs.forEach { tab in
            if let image = resizeImage(named: tab, size: iconSize) {
                UIPageControl.appearance().setPreferredIndicatorImage(image, forPage: tabs.firstIndex(of: tab)! + 1)
            }
        }
        // 给第一个home页面设置图标
        if let homeImage = resizeImage(named: "home", size: iconSize) {
            UIPageControl.appearance().setPreferredIndicatorImage(homeImage, forPage: 0)
        }
        // 缩小分页指示器高度（y轴缩放）
        UIPageControl.appearance().transform = CGAffineTransform(scaleX: 1, y: 0.6)
        // 调整图标间距
        UIPageControl.appearance().spacing = 8
    }
}

关键说明 #

• 清除UITableView默认背景后，List才能完全继承父视图的橙色背景，解决首屏与List页面背景不一致的问题。
• 通过resizeImage方法将图标缩放到指定尺寸，再设置给UIPageControl，解决图标过大的问题；同时通过transform的y轴缩放缩小分页指示器的整体高度。
• 注意第一个页面的索引是0，后面的List页面索引从1开始，设置forPage时要对应正确的索引。

内容的提问来源于stack exchange，提问作者Tom