Изображение кнопки Swifui растягивается на всю страницу
Я не уверен, как добиться того, чтобы изображение сохраняло разумный размер, поскольку я новичок в SwiftUI и не сомневаюсь, что это полностью моя вина.
Код выглядит следующим образом:
import SwiftUI
struct AnimalsView: View {
var body: some View {
NavigationStack {
ZStack {
VStack(spacing: 20) {
HStack {
Text("Hello")
}
HStack {
NavigationLink(destination: ManagementView()) {
ZStack {
Image("Button-Normal")
.resizable()
.frame(width: 150, height: 50)
Text("Breeding")
.font(.title3)
.foregroundColor(.black)
.fontWeight(.medium)
}
}
NavigationLink(destination: AnimalsView()) {
ZStack {
Image("Button-Normal")
.resizable()
.padding()
Text("Animals")
.font(.title3)
.foregroundColor(.black)
.fontWeight(.medium)
}
}
}
HStack {
}
HStack {
}
}
.toolbar {
Button("Logout") {
Task {
let Signout = SignOutLocally()
await Signout.signOutLocally()
}
}
}
}
.background {
Image("Rancher1")
.resizable()
.scaledToFill()
.ignoresSafeArea()
}
}
}
}
#Preview {
AnimalsView()
}
Первая кнопка имеет рамку, определенную по высоте и ширине, но я знаю, что Apple настоятельно рекомендует избегать этого.
Я знаю, что некоторые разработчики предпочитают использовать NavigationLink в качестве самой кнопки, и я тоже пробовал это, но это никогда не работало правильно. Любая помощь будет оценена по достоинству.
Меня это устраивает, однако кнопки на устройствах iPad должны быть разного размера. Есть ли способ определить это в одном и том же коде?
Что вы подразумеваете под «кнопки на iPad должны быть разного размера»? Пожалуйста, очень четко и конкретно скажите, чего вы хотите.
Вы можете использовать максимальную/минимальную ширину/высоту, соотношение сторон и т. д., чтобы еще больше ограничить кнопку.
Ответы 1
Вам нужно лучше разобраться в основах SwiftUI, таких как макет, объединение представлений и определение структур. ZStacks — это весело, но они не являются ответом на все вопросы.
В вашем случае все внутри NavigationLink должно быть структурой, принимающей текстовый параметр, или стилизованной кнопкой.
Для этого макета вам не понадобится триллион ZStacks. Посмотрите, как я это сделал ниже, и сравните. Обратите внимание на использование только двух стопок для достижения желаемого макета. Я оставил фон желтым, в качестве упражнения вы можете установить собственное изображение.
import SwiftUI
struct FarmView: View {
@State private var path = NavigationPath()
enum Destination: Hashable {
case red
case orange
}
var body: some View {
NavigationStack(path: $path){
VStack{
Text("Select an interest:")
HStack {
Button("Breeding"){
path.append(Destination.orange)
}
.buttonStyle(OrangeButtonStyle())
Button("Animals"){
path.append(Destination.red)
}
.buttonStyle(OrangeButtonStyle())
}
}
.toolbar {
Button("Logout") {
//action here...
}
.tint(.black)
}
.frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .center)
.background{
Color.yellow //or the image of your choice
.ignoresSafeArea()
}
.navigationTitle("Welcome")
// .toolbarTitleDisplayMode(.inlineLarge)
.navigationDestination(for: Destination.self) { destination in
switch destination {
case .orange:
BreedingView()
case .red:
AnimalsView()
}
}
}
.tint(.white)
}
}
struct OrangeButtonStyle: ButtonStyle {
func makeBody(configuration: Configuration) -> some View {
configuration.label
.foregroundStyle(.black)
.fontWeight(.semibold)
.padding(.vertical, 8)
.padding(.horizontal, 15)
.foregroundStyle(.white)
.background {
LinearGradient(colors: [.white.opacity(0.9), .yellow, .orange, .orange], startPoint: .top, endPoint: .bottom)
}
.clipShape(RoundedRectangle(cornerRadius: 12))
.background {
RoundedRectangle(cornerRadius: 12)
.stroke(.black.opacity(0.3), lineWidth: 10)
}
.scaleEffect(1.2)
.padding()
}
}
struct AnimalsView: View {
var body: some View {
ZStack{
Color.red
.ignoresSafeArea()
.navigationTitle("Red View")
}
}
}
struct BreedingView: View {
var body: some View {
ZStack{
Color.orange
.ignoresSafeArea()
.navigationTitle("Orange View")
}
}
}
#Preview {
FarmView()
}
Я не использовал NavigationLink, чтобы использовать кнопку, и показал, как можно управлять навигацией без навигационной ссылки, что дает вам возможность использовать любое представление по мере необходимости или вообще не использовать его (и перемещаться, изменяя путь в функция как часть какой-либо логики).
Я предлагаю вам еще раз просмотреть уроки и убедиться, что вы можете без проблем выполнить такой базовый макет.
Андрей, спасибо за четкое и вежливое объяснение. Очень ценю. Я пройдусь по урокам.
Нет ничего плохого в использовании
.frame(width: height:), примеры Apple часто используют его для изменения размера изображений/фотографий/изображений, представлений и т. д., например Учебное пособие по примерам приложений и Developer.apple.com/tutorials/sample-apps/… и многое другое. Создайте рамку для изображения или включающего его контейнера. Также есть.frameс maxWidth и maxHeight.