Berdebar. Menyederhanakan Tata Letak Widget dengan Ekstensi Dart

Di Dart 2.7, kami diperkenalkan dengan ekstensi yang memungkinkan pengembang untuk menambahkan fungsionalitas baru ke tipe yang ada. Ekstensi dapat menjadi penolong yang hebat tidak hanya ketika kita menulis logika bisnis, tetapi juga ketika kita memiliki tugas lain! Contoh dari tugas semacam itu adalah bekerja dengan widget.

Berdasarkan pengalaman saya dengan pengembangan iOS, yang terinspirasi oleh ViewModifierSwiftUI, saya ingin mengetahui cara menggunakan ekstensi Dart dengan cara yang sama untuk mengurangi kekacauan visual yang dihasilkan dari sarang besar widget tree.

Mari kita ambil contoh!

Opsi dengan widget bersarang

Di bawah ini adalah MyWidgetwidget dengan teks di dalamnya Padding(dari contoh standar dengan dartpad.dev ).

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return
      Padding(
        padding: const EdgeInsets.all(16),
        child: Text('Hello, World!', style: Theme.of(context).textTheme.headline4)
      );
  }
}

Sekarang mari kita lihat bagaimana kita dapat melakukan hal yang sama dengan ekstensi Dart.

Opsi dengan ekstensi

Kami membuat ekstensi untuk kelas Widgetdengan metode padding. Ketika metode ini dipanggil, objek akan dibungkus Padding:

extension WidgetModifier on Widget {
  Widget padding([EdgeInsetsGeometry value = const EdgeInsets.all(16)]) {
    return Padding(
      padding: value,
      child: this,
    );
  }
}

Dengan ekstensi baru, kami dapat memperbarui MyWidgetsebagai berikut:

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Text('Hello, World!', style: Theme.of(context).textTheme.headline4)
            .padding();
  }
}

, , ! , , .

:

extension WidgetModifier on Widget {

  // ...

  Widget background(Color color) { // 
    return DecoratedBox(
      decoration: BoxDecoration(
        color: color,
      ),
      child: this,
    );
  }

  Widget cornerRadius(BorderRadiusGeometry radius) { //  
    return ClipRRect(
      borderRadius: radius,
      child: this,
    );
  }

  Widget align([AlignmentGeometry alignment = Alignment.center]) { // 
    return Align(
      alignment: alignment,
      child: this,
    );
  }
}

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Text('Hello, World!', style: Theme.of(context).textTheme.headline4)
            .padding()
            .background(Colors.lightBlue)
            .cornerRadius(BorderRadius.all(Radius.circular(8.0)))
            .padding(EdgeInsets.symmetric(horizontal: 8, vertical: 16))
            .background(Colors.purple);
  }
}

dartpad.dev

? , ! , , .

Dalam artikel ini, kami mempertimbangkan pendekatan alternatif untuk membentuk pohon widget dalam proyek Flutter, menggunakan konsep yang mirip dengan yang ViewModifierdari SwiftUI. Dengan pendekatan ini, kita dapat menyederhanakan pohon widget dengan mengurangi sarangnya. Dan saya telah menunjukkan hanya beberapa contoh ekstensi seperti itu, tetapi dengan prinsip yang sama, Anda dapat membuat banyak yang baru untuk kasus lain di mana mereka akan sama bermanfaatnya.

Terima kasih atas perhatian anda! Semoga posting ini bermanfaat. Jika Anda memiliki pertanyaan atau komentar tentang materi ini, jangan ragu untuk menghubungi saya di Twitter !

Sampai Lain waktu!