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?
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
}