Двойная граница в контейнере SwiftUI

Я не могу добавить жирную границу, за которой следует нежирная граница.

Я могу сделать нежирную, а затем жирную границу, но я не знаю, возможна ли граница, за которой следует жирная граница и нежирная граница.

это то, что у меня есть на данный момент:::


import SwiftUI

struct ContentView: View {
    var body: some View {
        EventMatcherCardBorder{
            Text("A")
        }
    }
}

#if DEBUG
struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}
#endif

struct EventMatcherCardBorder<Content: View>: View {
    let content: Content
    let CORNER_RADIUS: CGFloat = 50
    
    init(@ViewBuilder content: () -> Content) {
        self.content = content()
    }
    
    var body: some View {
        VStack{
            VStack{
                VStack {
                    VStack{
                        
                        Spacer().frame(height:5)
                        Image("auth_icon")
                            .resizable()
                            .aspectRatio(contentMode: .fit)
                            .frame(height: 50)
                        content
                            .background(Color.white)
                            .padding(10)
                    }
                    .frame(maxWidth: .infinity, maxHeight: .infinity)
                }
                .padding(2)
                .overlay(
                    RoundedRectangle(cornerRadius: CORNER_RADIUS)
                        .stroke(ThemeColors.dark_blue_2, lineWidth: 8)
                )
            }
            .padding(1)
            .overlay(
                RoundedRectangle(cornerRadius: CORNER_RADIUS)
                    .stroke( ThemeColors.dark_blue_3, lineWidth: 6)
            )
        }.padding(15)
        
    }
}

struct ThemeColors {
    static let dark_blue_2 = Color.blue
    static let dark_blue_3 = Color.red
}


я не нашел stackoverflow с границей Bold not-Bold

Картина — желаемый результат или результат вашей неудачной попытки? Когда вы говорите «А, за которым следует Б», вы имеете в виду, что А — внутренняя граница, а Б — внешняя граница, или наоборот?

Sweeper 12.03.2024 23:31

Этот пост может помочь: Как нарисовать обводку вне элемента?

Benzy Neez 12.03.2024 23:44
Стоит ли изучать PHP в 2026-2027 годах?
Стоит ли изучать PHP в 2026-2027 годах?
Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в...
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Приемы CSS-макетирования - floats и Flexbox
Приемы CSS-макетирования - floats и Flexbox
Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...
Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Пользовательский скаляр GraphQL
Пользовательский скаляр GraphQL
Листовые узлы системы типов GraphQL называются скалярами. Достигнув скалярного типа, невозможно спуститься дальше по иерархии типов. Скалярный тип...
0
2
54
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Если вы хотите, чтобы за темной рамкой следовала более светлая граница, то используйте static let dark_blue_2 = Color.blue.opacity(0.3) и добавьте .padding(4) после .stroke(ThemeColors.dark_blue_2, lineWidth: 8) чтобы настроить расположение внутренней границы светлея, как показано в примере кода:

struct EventMatcherCardBorder<Content: View>: View {
    let content: Content
    let CORNER_RADIUS: CGFloat = 50
    
    init(@ViewBuilder content: () -> Content) {
        self.content = content()
    }
    
    var body: some View {
        VStack{
            VStack{
                VStack {
                    VStack{
                        Spacer().frame(height:5)
                     //   Image("auth_icon")
                        Image(systemName: "house") // <-- for testing
                            .resizable()
                            .aspectRatio(contentMode: .fit)
                            .frame(height: 50)
                        content
                            .background(Color.white)
                            .padding(10)
                    }
                    .frame(maxWidth: .infinity, maxHeight: .infinity)
                }
                .padding(2)
                .overlay(
                    RoundedRectangle(cornerRadius: CORNER_RADIUS)
                        .stroke(ThemeColors.dark_blue_2, lineWidth: 8)
                        .padding(4) // <-- here, adjust as required
                )
            }
            .padding(1)
            .overlay(
                RoundedRectangle(cornerRadius: CORNER_RADIUS)
                    .stroke(ThemeColors.dark_blue_3, lineWidth: 6)
            )
        }.padding(15)
    }
}

struct ThemeColors {
    static let dark_blue_2 = Color.blue.opacity(0.3) // <-- here, adjust as required
    static let dark_blue_3 = Color.red
}

Другие вопросы по теме