0
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

角丸で枠線がグラデーションのTextEditor

0
Posted at

iOS16では背景色をつける場合はscrollContentBackgroundモディファイアを使う。
※iOS15以前は

    init() {
        UITextView.appearance().backgroundColor = .clear
    }

と書いていたが、iOS16ではこの機能は使えない。


struct ContentView: View {

    @State var textEditor: String = "ああああ"
    var body: some View {
        ZStack {
            Color.brown.opacity(0.5)
            TextEditor(text: $textEditor)
                .frame(width: 100, height: 100)
                .scrollContentBackground(.hidden)
                .background(.white, in: RoundedRectangle(cornerRadius: 30.0))
                .overlay(
                    ZStack {
                        RoundedRectangle(cornerRadius: 30.0)
                            .stroke(
                                LinearGradient(
                                    colors: [
                                        Color(red: 254 / 255, green: 212 / 255, blue: 117 / 255)
                                        ,Color(red: 229 / 255, green: 61 / 255, blue: 93 / 255)
                                        ,Color(red: 194 / 255, green: 49 / 255, blue: 134 / 255)
                                    ],
                                    startPoint: .bottomLeading,
                                    endPoint: .topTrailing
                                ),
                                lineWidth: 2
                            )
                    }
                )
        }
    }
}

image.png

0
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?