Published on

SwiftUI-da TextEditor

Authors

Hammaga xush kelibsiz! Mening ismim Nick, bu β€” Swiftful Thinking kanali.

Bu videoda TextEditor bilan ishlashni o'rganamiz. Oldingi videoda TextField ko'rdik β€” u bir qatorli matn kiritish uchun. Agar foydalanuvchi bir necha qator yoza olishi kerak bo'lsa β€” masalan, bio yozish uchun β€” TextEditor ishlatiladi.

TextField va TextEditor β€” qaysi birini tanlash kerak?

HolatIshlatish kerak
Bir qatorli kiritish (foydalanuvchi nomi, email)TextField
Ko'p qatorli kiritish (bio, izoh, xabar)TextEditor

Iloji bo'lsa TextField ishlating β€” u sozlash uchun qulayroq. TextEditor-ni faqat ko'p qator zarur bo'lganida qo'llang.

Yangi fayl yaratish

Navigatorda o'ng tugma bosib yangi SwiftUI fayli yarating. Uni TextEditorBootcamp deb nomlang va Create tugmasini bosing. Canvas-da Resume bosing.

Boshlang'ich ko'rinish

struct TextEditorBootcamp: View {

    @State var textEditorText: String = "Bu boshlang'ich matn"
    @State var savedText: String = ""

    var body: some View {
        NavigationView {
            VStack {
                TextEditor(text: $textEditorText)

                Button(action: {
                    savedText = textEditorText
                }, label: {
                    Text("SAQLASH")
                        .font(.headline)
                        .foregroundColor(.white)
                        .padding()
                        .frame(maxWidth: .infinity)
                        .background(Color.blue)
                        .cornerRadius(10)
                })

                Text(savedText)

                Spacer()
            }
            .navigationTitle("TextEditor")
        }
    }
}

TextEditor TextField-dan farqli β€” u ko'p qatorli kiritish maydonini yaratadi. Foydalanuvchi Enter bosib yangi qatorga o'tishi va yuqori-pastga aylantirib o'qishi mumkin.

Balandlikni cheklash

TextEditor odatda mavjud bo'sh joyni to'liq egallaydi. Balandligini cheklash uchun .frame() qo'shamiz:

TextEditor(text: $textEditorText)
    .frame(height: 250)

Elementlar joylashuvini tushunish

Agar element qayerda boshlanib-tugashini bilmasangiz, vaqtinchalik .background() qo'shing:

VStack {
    // ...
}
.padding()
.background(Color.green) // faqat debug uchun

Joylashuv aniqlanganidan so'ng bu qatorni o'chirib tashlang.

Saqlash funksiyasi

Tugma bosilganda TextEditor-dagi matnni boshqa o'zgaruvchiga saqlaymiz:

struct TextEditorBootcamp: View {

    @State var textEditorText: String = "Bu boshlang'ich matn"
    @State var savedText: String = ""

    var body: some View {
        NavigationView {
            VStack(spacing: 12) {
                TextEditor(text: $textEditorText)
                    .frame(height: 250)

                Button(action: {
                    savedText = textEditorText
                }, label: {
                    Text("SAQLASH")
                        .font(.headline)
                        .foregroundColor(.white)
                        .padding()
                        .frame(maxWidth: .infinity)
                        .background(Color.blue)
                        .cornerRadius(10)
                })

                Text(savedText)

                Spacer()
            }
            .padding()
            .navigationTitle("TextEditor")
        }
    }
}

Haqiqiy ilovada "Saqlash" tugmasi bosilganda serverga yoki ma'lumotlar bazasiga yozish kabi amallar bajariladi. Bu yerda savedText o'zgaruvchisi o'sha operatsiyani simulyatsiya qilmoqda.

Ranglarni sozlash

Matn rangi

TextEditor(text: $textEditorText)
    .frame(height: 250)
    .foregroundColor(.red)

Fon rangi β€” .colorMultiply()

TextEditor-ga to'g'ridan-to'g'ri .background() qo'shish ishlamaydi. Buning o'rniga .colorMultiply() ishlatiladi:

TextEditor(text: $textEditorText)
    .frame(height: 250)
    .colorMultiply(Color(white: 0.9)) // och kulrang
    .cornerRadius(10)

Eslatma: .colorMultiply() matn rangi qora bo'lganda to'g'ri ishlaydi. Matn rangini o'zgartirsangiz, natija kutilganidek bo'lmasligi mumkin.

To'liq kod

struct TextEditorBootcamp: View {

    @State var textEditorText: String = "Bu boshlang'ich matn"
    @State var savedText: String = ""

    var body: some View {
        NavigationView {
            VStack(spacing: 12) {
                TextEditor(text: $textEditorText)
                    .frame(height: 250)
                    .colorMultiply(Color(white: 0.9))
                    .cornerRadius(10)

                Button(action: {
                    savedText = textEditorText
                }, label: {
                    Text("SAQLASH")
                        .font(.headline)
                        .foregroundColor(.white)
                        .padding()
                        .frame(maxWidth: .infinity)
                        .background(Color.blue)
                        .cornerRadius(10)
                })

                Text(savedText)

                Spacer()
            }
            .padding()
            .navigationTitle("TextEditor")
        }
    }
}

Xulosa

Bu videoda o'rgandik:

  • TextEditor β€” ko'p qatorli matn kiritish komponenti
  • TextField β€” bir qatorli, TextEditor β€” ko'p qatorli
  • .frame(height:) β€” TextEditor balandligini cheklash
  • Saqlash pattern β€” @State o'zgaruvchisi + tugma bosilganda qiymat uzatish
  • .colorMultiply() β€” TextEditor fon rangini o'zgartirish usuli
  • Qoida: iloji bo'lsa TextField ishlating, faqat ko'p qator kerak bo'lsa TextEditor ishlating

Rahmat tomosha qilganingiz uchun! Men β€” Nick, bu Swiftful Thinking. Keyingi videoda ko'rishamiz!

Buy mea coffee