Swiftui和WatchOS-更新导航标题颜色和文本字体

发布于 2025-02-05 20:13:51 字数 3228 浏览 0 评论 0原文

正在学习WatchOS开发和学习Swiftui,并遇到2个问题。在下图中,

第1期 - 我希望具有“设置1”,“ SET 2”,“设置1”(在第二行)和“我的设置”(在第二行上)的统一文本)。我注意到,当文本更长时,它要么包裹到第二行(如图2所示)。如果我将其添加到一行中,那么在所有选项中都不会看到统一的文本。即使文本很大,我是否可以保持文本尺寸统一?我的文字不会比“我的设置”大。

第2期 - 我希望更改导航标题的字体颜色,并希望在没有省略号的情况下可以看到整个“示例应用程序”,即可见整个“应用程序”单词。在这种情况下,我的标题名称永远不会比“示例应用程序”大。对于标题颜色,我尝试更改重音颜色,但它不起作用。如何更改标题颜色和减少标题的大小以适合显示屏?

import SwiftUI

struct ContentView: View {
    
    @State var menu: [MenuItem] = [
        MenuItem(id: 0, name: "Set 1", imageName: "settings"),
        MenuItem(id: 1, name: "Set 2", imageName: "settings"),
        MenuItem(id: 2, name: "Settings 1", imageName: "settings"),
        MenuItem(id: 3, name: "My Settings", imageName: "settings"),
    ]
    
    var columns = Array(repeating: GridItem(.flexible(), spacing: 10), count: 2)
    @Namespace var namespace
    @State var selected: [MenuItem] = []
    
    var body: some View {
        NavigationView {
            ScrollView {
                if !self.menu.isEmpty {
                    LazyVGrid(columns: columns, spacing: 10) {
                        ForEach(self.menu) { item in
                            VStack {
                                Button(action: {}) {
                                    VStack{
                                        Image(item.imageName)
                                            .renderingMode(.template)
                                            .resizable()
                                            .scaledToFill()
                                            .frame(width: 20, height: 20)
                                            .padding(10)
                                            .background(Color(red: 34 / 255, green: 34 / 255, blue: 34 / 255))
                                            .foregroundColor(Color(red: 32 / 255, green: 148 / 255, blue: 249 / 255))
                                            .clipShape(Circle())
                                    }
                                }
                                .buttonStyle(PlainButtonStyle())
                                Text(item.name)
                                    .scaledToFill()
                                    .minimumScaleFactor(0.1)
                                    .lineLimit(1)
                                    .foregroundColor(Color.secondary)
                            }.padding(10)
                        }
                    }.padding()
                }
            }.navigationTitle("Sample Application")
                .scaledToFill()
                .minimumScaleFactor(0.1)
                .lineLimit(1)
                .accentColor(Color.blue)
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        Group {
            ContentView()
        }
    }
}

struct MenuItem: Identifiable {
    var id: Int
    var name: String
    var imageName: String
}

Am learning watchOS development and learning SwiftUI too and having 2 issues. In the below image,

Issue 1 - I wish to have uniform text for "Set 1", "Set 2", "Settings 1"(on 2nd row) and "My settings"(on 2nd row). I am noticing that when text is bit longer, it either wraps on to 2nd line(As shown in image 2). If I add it to be in one line, then I don't see uniform text in all the options. Is there a way I can keep my text size uniform even if the text is little big? My text won't be bigger than "My Settings".

Issue 2 - I wish to change the font color of navigation title and want to make entire "Sample Application" visible i.e. entire "Application" word should be visible without ellipsis. In this case as well, my title name will never be bigger than "Sample Application". For title color, I tried changing accent color, but it didn't work. How I do I change the title color and the reduce the size of title to fit the display?

enter image description hereenter image description here

Code:

import SwiftUI

struct ContentView: View {
    
    @State var menu: [MenuItem] = [
        MenuItem(id: 0, name: "Set 1", imageName: "settings"),
        MenuItem(id: 1, name: "Set 2", imageName: "settings"),
        MenuItem(id: 2, name: "Settings 1", imageName: "settings"),
        MenuItem(id: 3, name: "My Settings", imageName: "settings"),
    ]
    
    var columns = Array(repeating: GridItem(.flexible(), spacing: 10), count: 2)
    @Namespace var namespace
    @State var selected: [MenuItem] = []
    
    var body: some View {
        NavigationView {
            ScrollView {
                if !self.menu.isEmpty {
                    LazyVGrid(columns: columns, spacing: 10) {
                        ForEach(self.menu) { item in
                            VStack {
                                Button(action: {}) {
                                    VStack{
                                        Image(item.imageName)
                                            .renderingMode(.template)
                                            .resizable()
                                            .scaledToFill()
                                            .frame(width: 20, height: 20)
                                            .padding(10)
                                            .background(Color(red: 34 / 255, green: 34 / 255, blue: 34 / 255))
                                            .foregroundColor(Color(red: 32 / 255, green: 148 / 255, blue: 249 / 255))
                                            .clipShape(Circle())
                                    }
                                }
                                .buttonStyle(PlainButtonStyle())
                                Text(item.name)
                                    .scaledToFill()
                                    .minimumScaleFactor(0.1)
                                    .lineLimit(1)
                                    .foregroundColor(Color.secondary)
                            }.padding(10)
                        }
                    }.padding()
                }
            }.navigationTitle("Sample Application")
                .scaledToFill()
                .minimumScaleFactor(0.1)
                .lineLimit(1)
                .accentColor(Color.blue)
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        Group {
            ContentView()
        }
    }
}

struct MenuItem: Identifiable {
    var id: Int
    var name: String
    var imageName: String
}

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文