e
sv

Flutter'da Genişletme Paneli: Örnekler içeren bir kılavuz

avatar

Yazılım Method

  • e 0

    Mutlu

  • e 0

    Eğlenmiş

  • e 0

    Şaşırmış

  • e 0

    Kızgın

  • e 0

    Üzgün

Her mobil işletim sistemi, genellikle çok fazla özelleştirilemeyen çeşitli widget'lar içeren dahili bir UI araç takımı sunar. Flutter, Materyal Tasarımı spesifikasyonunu uygulayan ve mobil uygulama geliştiricilerini fütüristik, minimal kullanıcı arayüzleri oluşturmaya motive eden esnek bir widget sistemi ile birlikte gelir.

Platforma özel UI widget'larından farklı olarak Flutter, her genel gereksinim için birçok özelleştirilebilir widget seçeneği sunar, bu nedenle Flutter uygulamanızı benzersiz tasarım taslağınıza göre oluşturmak kolaydır. Bunlardan biri, genişletilebilir/daraltılabilir listeler oluşturmamıza yardımcı olan ExpansionPanel widget'ıdır.

Flutter uygulamalarımızda genişletilebilir/daraltılabilir listeler oluşturmak için bir ExpansionPanelList widget'ına birkaç ExpansionPanel widget'ı ekleyebiliriz. Bu widget'larda, kullanıcıların ek içeriği göstermesi/gizlemesi için bir genişletme/daraltma simgesi düğmesi bulunur. Flutter geliştiricileri, belirli liste öğeleri için büyük içerik segmentlerini görüntülemek (yani, ürün ayrıntılarını görüntülemek) için tipik olarak ayrı bir ayrıntı ekranı kullanır.

ExpansionPanel pencere aracı, geliştiricilerin ekranda gezinmeye gerek kalmadan her liste öğesi için küçük ve orta boy içerik segmentleri göstermesine yardımcı olur. UI/UX spesifikasyonlarında bu UI öğesi Akordeon, Genişletilebilir veya Daraltılabilir olarak adlandırılabilir.

Bu eğitimde, ExpansionPanel widget'ının nasıl kullanılacağını ve özelleştirileceğini pratik örneklerle açıklayacağım. Ayrıca, benzer özellikler sunan ExpansionTile widget'ı ile karşılaştıracağız.

İleri atla:

Flutter ExpansionPanel öğreticisi

ExpansionPanel widget'ı ile çalışmak için yeni bir Flutter projesi oluşturalım. Bu örnek kodu mevcut Flutter projelerinizde de kullanabilirsiniz.

Flutter'da yeniyseniz, Flutter geliştirme araçlarını resmi Flutter kurulum kılavuzuna göre kurun. Yaklaşan örnekleri Google Chrome'da, fiziksel bir mobil cihazda veya bir öykünücü/simülatörde çalıştırabilirsiniz. Bu eğitimde, örnek uygulamayı önizlemek için Chrome'u kullanacağım.

İlk olarak, aşağıdaki komutla yeni bir Flutter uygulaması oluşturun:

 çarpıntı oluşturma genişletme paneli_örnek
cd genişletme paneli_örnek

Her şeyin yolunda gittiğinden emin olmak için flutter run komutunu girin.

ExpansionPanel ile ExpansionPanelList Kullanma

Birkaç ExpansionPanel widget'ı ve bir ExpansionPanelList widget'ı içeren bir Flutter uygulaması oluşturmak için basit bir kılavuz sayfası oluşturalım. Kullanıcı, genişletmek ve daha fazla ayrıntı görmek için belirli bir adıma dokunabilir.

Çoğu senaryoda, verileri genellikle zaman uyumsuz bir işleve sahip bir arka uç web hizmeti aracılığıyla uygulama ön ucuna yükleriz, ancak öğreticimiz için ExpansionPanel hızlı bir şekilde kullanmaya başlamak için eşzamanlı bir işlevden sabit kodlanmış verileri işleyeceğiz.

main.dart dosyanıza aşağıdaki kodu ekleyin:

 'package:flutter/material.dart' dosyasını içe aktarın;

void main() => runApp(const MyApp());

class MyApp, StatelessWidget'ı genişletir {
  const Uygulamam({Anahtar? anahtar}) : super(anahtar: anahtar);
  static const String _title = 'Flutter Eğitimi';
  @geçersiz kıl
  Widget derlemesi(BuildContext bağlamı) {
    MaterialApp'ı iade et(
      başlık: _başlık,
      ana sayfa: İskele(
        appBar: AppBar(başlık: const Metin(_title)),
        gövde: const Adımlar(),
      ),
    );
  }
}

sınıf Adım {
  Adım(
    bu.başlık,
    bu.vücut,
    [this.isExpanded = yanlış]
  );
  Dize başlığı;
  Dize gövdesi;
  bool Genişletilmiş;
}

Liste<Adım> getSteps() {
  dönüş [
    Step('Adım 0: Flutter'ı kurun', 'Flutter geliştirme araçlarını resmi belgelere göre yükleyin.'),
    Adım('Adım 1: Bir proje oluşturun', 'Terminalinizi açın, yeni bir proje oluşturmak için `flutter create <project_name>` komutunu çalıştırın.'),
    Adım('Adım 2: Uygulamayı çalıştırın', 'Terminal dizininizi proje dizinine değiştirin, 'flutter run' girin.'),
  ];
}

class Steps, StatefulWidget'ı genişletir {
  const Adımlar({Anahtar? anahtar}) : super(anahtar: anahtar);
  @geçersiz kıl
  Durum<Adımlar> createState() => _StepsState();
}

class _StepsState, State<Steps> {'i genişletir
  son Liste<Adım> _steps = getSteps();
  @geçersiz kıl
  Widget derlemesi(BuildContext bağlamı) {
    SingleChildScrollView(
      çocuk: Konteyner(
        alt: _renderSteps(),
      ),
    );
  }
  Widget _renderSteps() {
    ExpansionPanelList'i döndür(
      genişlemeCallback: (int dizin, bool isExpanded) {
        setState(() {
          _steps[index].isExpanded = !isExpanded;
        });
      },
      çocuklar: _steps.map<ExpansionPanel>((Adım adım) {
        Genişletme Panelini döndür(
          headerBuilder: (BuildContext bağlamı, bool isExpanded) {
            ListTile'ı döndür(
              başlık: Metin(adım.başlık),
            );
          },
          gövde: ListTile(
            başlık: Metin(adım.body),
          ),
          isExpanded: step.isExpanded,
        );
      }).Listeye(),
    );
  }
}

Yukarıdaki örnek kodla ilgili aşağıdaki gerçeklere dikkat edin:

  • Steps widget'ı, genişletilebilir listenin tamamını ekranda oluşturmaktan sorumludur.
  • getSteps eşzamanlı işlevi, tüm sabit kodlanmış adımları Item sınıfının örnekleri olarak döndürür ve _steps pencere öğesi durum değişkeni tüm öğeleri bir Dart List olarak tutar
  • ExpansionPanelList sınıfından iki parametre kullanıyoruz:
    • _steps listesini dönüştürerek tüm ExpansionPanel örneklerini ayarlamak için children
    • Genişletme/daraltma düğmesiyle son kullanıcı etkileşimine dayalı olarak _steps listesini güncellemek için expansionCallback geri çağırma
  • İyi tasarlanmış bir Malzeme listesi görüntülemek için Text kullanmak yerine ListTile sınıfını kullandık

Yukarıdaki kodu çalıştırın. Aşağıdaki önizlemede gösterildiği gibi bir Flutter projesi oluşturma adımlarını göreceksiniz:

Flutter ExpansionPanel widget'ımızın örneği

Daha fazla adım ekleyerek uygulamayı test edin veya List.generate fabrika oluşturucusu ile bazı dinamik veriler oluşturmaya çalışın.

Web arka ucunuzdan veri yüklemeniz gerekiyorsa, ExpansionPanelList pencere öğesini her zamanki gibi FutureBuilder ile sarabilirsiniz:

 'package:flutter/material.dart' dosyasını içe aktarın;

void main() => runApp(const MyApp());

class MyApp, StatelessWidget'ı genişletir {
  const Uygulamam({Anahtar? anahtar}) : super(anahtar: anahtar);
  static const String _title = 'Flutter Eğitimi';
  @geçersiz kıl
  Widget derlemesi(BuildContext bağlamı) {
    MaterialApp'ı iade et(
      başlık: _başlık,
      ana sayfa: İskele(
        appBar: AppBar(başlık: const Metin(_title)),
        gövde: const Adımlar(),
      ),
    );
  }
}

sınıf Adım {
  Adım(
    bu.başlık,
    bu.vücut,
    [this.isExpanded = yanlış]
  );
  Dize başlığı;
  Dize gövdesi;
  bool Genişletilmiş;
}

Future<List<Step>> getSteps() zaman uyumsuz {
  var _items = [
    Step('Adım 0: Flutter'ı kurun', 'Flutter geliştirme araçlarını resmi belgelere göre yükleyin.'),
    Adım('Adım 1: Bir proje oluşturun', 'Terminalinizi açın, yeni bir proje oluşturmak için `flutter create <project_name>` komutunu çalıştırın.'),
    Adım('Adım 2: Uygulamayı çalıştırın', 'Terminal dizininizi proje dizinine değiştirin, 'flutter run' girin.'),
  ];
  return Future<List<Step>>.delayed(const Duration(saniye: 2), () => _items);
}

class Steps, StatelessWidget'ı genişletir {
  const Adımlar({Anahtar? anahtar}) : super(anahtar: anahtar);
  @geçersiz kıl
  Widget derlemesi(BuildContext bağlamı) {
    SingleChildScrollView(
      çocuk: Konteyner(
        alt: FutureBuilder<List<Adım>>(
          gelecek: getSteps(),
          oluşturucu: (BuildContext bağlamı, AsyncSnapshot<List<Step>> anlık görüntü) {
            if(snapshot.hasData) {
              dönüş StepList(adımlar: snapshot.data ?? []);
            }
            başka {
              dönüş Merkezi(
                çocuk: Dolgu(
                  dolgu: EdgeInsets.all(16),
                  alt: CircularProgressIndicator(),
                ),
              );
            }
          }
        ),
      ),
    );
  }
}

class StepList, StatefulWidget'ı genişletir {
  son Liste<Adım> adımları;
  const StepList({Anahtar? anahtar, gerekli this.steps}) : super(anahtar: anahtar);
  @geçersiz kıl
  State<StepList> createState() => _StepListState(adımlar: adımlar);
}

class _StepListState, State<StepList> { öğesini genişletir
  nihai Liste<Adım> _steps;
  _StepListState({gerekli Liste<Adım> adımlar}) : _steps = adımlar;
  @geçersiz kıl
  Widget derlemesi(BuildContext bağlamı) {
    ExpansionPanelList'i döndür(
      genişlemeCallback: (int dizin, bool isExpanded) {
        setState(() {
          _steps[index].isExpanded = !isExpanded;
        });
      },
      çocuklar: _steps.map<ExpansionPanel>((Adım adım) {
        Genişletme Panelini döndür(
          headerBuilder: (BuildContext bağlamı, bool isExpanded) {
            ListTile'ı döndür(
              başlık: Metin(adım.başlık),
            );
          },
          gövde: ListTile(
            başlık: Metin(adım.body),
          ),
          isExpanded: step.isExpanded,
        );
      }).Listeye(),
    );
  }
}

Aşağıda açıklandığı gibi önceki kaynak koduna üç güncelleme yaptık:

  1. getSteps işlevini yapay bir gecikmeyle eşzamansız hale getirdi, böylece artık genişletilebilir liste için verileri bir web hizmetinden favori ağ oluşturma istemci kitaplığı (örneğin, Dio ) aracılığıyla bile getirebilirsiniz.
  2. Yapay ağ gecikmesi sırasında dairesel bir yükleme animasyonu görüntülemek için koşullu oluşturmayı kullanan StepList adlı ikinci bir pencere öğesi oluşturarak genişletilebilir listeyi bir FutureBuilder ile sardı
  3. Orada durumda herhangi bir veri tutmadığımız için Steps widget'ını durumsuz hale getirdik

Yukarıdaki kodu çalıştırın – iki saniyelik bir gecikmeden sonra genişletilebilir listeyi göreceksiniz:

FutureBuilder ile genişletilebilir liste verilerini eşzamansız olarak yükleme

Bu iki yaklaşımdan herhangi birini kullanarak, ExpansionPanel pencere aracını kullanmanız gereken herhangi bir durum için çözümler sunabilirsiniz.

Şimdi, ExpansionPanel sunduğu özellikleri inceleyelim! Yaklaşan örneklerde, eşzamansız sürüme kıyasla uygulaması minimum olduğundan, eşzamanlı sürümü güncelleyeceğiz. İlk örnek kaynak kodunu tekrar main.dart dosyanıza kopyalayın ve eğitime devam etmeye hazır olun.

ExpansionPanel widget'ının kullanıcı arayüzü nasıl özelleştirilir

ExpansionPanel ListTile ile birlikte kullandığınızda, önceki örneklerde gördüğümüz gibi kullanıcı dostu genişletilebilir bir liste elde edeceksiniz. Kişisel tercihinize veya uygulama temasına göre özelleştirebilirsiniz. Örneğin, öğelerin arka plan rengini aşağıdaki gibi değiştirirsiniz:

 Genişletme Panelini döndür(
  //.....
  //...
  arkaplanRenk: const Renk(0xffeeeeff),
);

Genişletilebilir listenin ayırıcı rengini aşağıdaki kod parçacığında gösterildiği gibi değiştirebilirsiniz:

 ExpansionPanelList'i döndür(
  bölücüColor: Colors.teal,
  //....
  //...

Başlık için özel bir dolgu ayarlamak da mümkündür. Aşağıdaki örneğe bakın:

 ExpansionPanelList'i döndür(
  genişletilmişHeaderPadding: EdgeInsets.all(6),
  //....
  //...

Aşağıdaki _renderSteps yöntemi uygulaması, birkaç UI özelleştirmesini uygulamak için yukarıdaki parametreleri kullanır.

 Widget _renderSteps() {
    ExpansionPanelList'i döndür(
      bölücüColor: Colors.teal,
      genişletilmişHeaderPadding: EdgeInsets.all(0),
      genişlemeCallback: (int dizin, bool isExpanded) {
        setState(() {
          _steps[index].isExpanded = !isExpanded;
        });
      },
      çocuklar: _steps.map<ExpansionPanel>((Adım adım) {
        Genişletme Panelini döndür(
          arkaplanRenk: const Renk(0xffeeeeff),
          headerBuilder: (BuildContext bağlamı, bool isExpanded) {
            ListTile'ı döndür(
              başlık: Metin(adım.başlık),
            );
          },
          gövde: ListTile(
            başlık: Metin(adım.body),
          ),
          isExpanded: step.isExpanded,
        );
      }).Listeye(),
    );
  }

Şimdi, aşağıdaki önizlemede gösterildiği gibi, özelleştirilmiş bir genişletilebilir liste kullanıcı arayüzü göreceksiniz:

ExpansionPanel Kullanıcı Arayüzümüzün özelleştirilmiş bir sürümü

ExpansionPanel animasyonunu ve dokunma geri bildirimini ayarlama

Flutter widget sistemi, ExpansionPanel animasyonunun hızını değiştirmenizi sağlar. Örneğin, animasyon süresini aşağıdaki gibi uzatarak animasyonunu yavaşlatabilirsiniz:

 ExpansionPanelList'i döndür(
  animasyonSüresi: const Süre(milisaniye: 1500),
  //....
  //...

ExpansionPanel widget'ı, yalnızca kullanıcılar sağ taraftaki simge düğmesine dokunduğunda içerik bölümünü açar/kapatır, ancak aşağıdaki kurulumu kullanırsanız kullanıcılar tüm başlık bölümüne dokunarak aynı işlemi yapabilir:

 Genişletme Panelini döndür(
  canTapOnHeader: doğru,
  //...
  //..

Uygulama kullanıcılarınız genellikle küçük ekranlı cihazlar kullanıyorsa, bu yapılandırma iyi bir kullanıcı deneyimi iyileştirmesidir; genişletme/daraltma eylemini etkinleştirmek için küçük genişletme/daraltma simgesi düğmesine sağa dokunmaları gerekmez.

Widget durumuna göre otomatik olarak genişleyen ExpansionPanel

Önceki örneklerde, Step sınıfında isExpanded sınıf değişkenini kullandık, ancak bunun için getSteps işlevinden açıkça bir değer belirlemedik. Tek sahip olduğumuz genişleme panelleri başlangıçta çöktü.

Otomatik genişletilmiş bir öğe ayarlamak için ExpansionPanel sınıfının isExpanded parametresi için bir başlangıç değeri ayarlayabiliriz. Aşağıdaki eşzamanlı getSteps işlev uygulamasını kullanın:

 Liste<Adım> getSteps() {
  dönüş [
    Adım('Adım 0: Flutter'ı Kurun',
        'Flutter geliştirme araçlarını resmi belgelere göre yükleyin.',
        doğru),
    Adım('Adım 1: Bir proje oluşturun', 'Terminalinizi açın, yeni bir proje oluşturmak için `flutter create <project_name>` komutunu çalıştırın.'),
    Adım('Adım 2: Uygulamayı çalıştırın', 'Terminal dizininizi proje dizinine değiştirin, 'flutter run' girin.'),
  ];
}

Burada, ilk liste öğesinde isExpanded için true değerini belirledik. _renderSteps yönteminde aşağıdaki kod satırını bulun:

 isExpanded: step.isExpanded,

Yukarıdaki satır isExpanded Step örneğinden ExpansionPanel öğesine iletir, böylece şimdi ilk panelin başlangıçta otomatik olarak genişletildiğini görebiliriz:

ExpansionPanelList'te belirli bir paneli otomatik olarak açın

Benzer şekilde, ilk açılan panelleri web arka uçlarınızdan bile kontrol edebilirsiniz!

Tüm öğeleri aynı anda genişletme ve daraltma

Bazı uygulamalarda, tüm genişletilebilir segmentleri tek bir tuşla bir kerede genişletip daraltabileceğimizi hiç fark ettiniz mi? Bu özellik, kullanıcıların her bir genişletme paneline dokunmadan tüm gizli içeriği okuması gerektiğinde yararlıdır. _StepsState için aşağıdaki build yöntemi uygulamasını kullanın:

 @geçersiz kıl
  Widget derlemesi(BuildContext bağlamı) {
    SingleChildScrollView(
      çocuk: Sütun(
        çocuklar: <Widget>[
          Dolgu malzemesi(
            dolgu: EdgeInsets.all(12),
            çocuk: YükseltilmişDüğme(
              alt: const Metin('Tümünü genişlet'),
              onPressed: () {
                setState(() {
                  for(int i = 0; i < _adımlar.uzunluk; i++) {
                    _steps[i].isExpanded = true;
                  }
                });
              },
            ),
          ),
          _renderAdımlar()
        ],
      ),
    );
  }

Burada tüm panelleri bir kerede genişletmek için bir düğme oluşturduk. setState yöntemi çağrı kümeleri isExpanded tüm liste öğesi örnekleri için true , bu nedenle düğmeye bir kez dokunduğunuzda tüm adımlar aşağıdaki gibi genişletilir:

ExpansionPanelList için tümünü genişlet düğmesi uygulama

Benzer şekilde, isExpanded parametresini false olarak ayarlayarak tüm panelleri daraltmak için bir düğme uygulayabilirsiniz:

 _steps[i].isExpanded = yanlış;

ExpansionPanelList için tümünü daralt düğmesi uygulama

ExpansionPanelRadio ile radyo genişletme panelleri oluşturma

Varsayılan ExpansionPanelList widget'ı bir grup onay kutusu gibi davranır, bu nedenle bir panele dokunduğumuzda o panel genişler ve onu daraltmak için tekrar tıklamamız gerekir.

Peki ya bir grup radyo düğmesi gibi davranan genişletilebilir bir liste oluşturmamız gerekirse? Onay kutuları grubunda olduğu gibi yalnızca bir paneli genişletilmiş tutabiliriz.

Çözüm olarak, tüm özellikleri genişlet/daralt uyguladığımız şekilde _steps listesini güncellemek için bazı özel mantık yazmayı düşünebilirsiniz, ancak Flutter widget sistemi aslında bu gereksinim için dahili ExpansionPanelRadio sunar.

_renderSteps işlev uygulaması için aşağıdaki kodu kullanın:

 Widget _renderSteps() {
    ExpansionPanelList.radio(
      çocuklar: _steps.map<ExpansionPanelRadio>((Adım adım) {
        ExpansionPanelRadio'yu döndür(
          headerBuilder: (BuildContext bağlamı, bool isExpanded) {
            ListTile'ı döndür(
              başlık: Metin(adım.başlık),
            );
          },
          gövde: ListTile(
            başlık: Metin(adım.body),
          ),
          değer: adım.başlık
        );
      }).Listeye(),
    );
  }

Burada ExpansionPanelRadio widget'ını ExpansionPanelList.radio yapıcısıyla kullandık. ExpansionPanelRadio pencere aracı, isExpanded parametresini ExpansionPanel yaptığı gibi kabul etmez; bunun yerine, value parametresiyle benzersiz bir değeri kabul eder. Ayrıca, expansionCallback çerçevesi, kullanıcı bir başkasını açtığında açık panelleri otomatik olarak daraltmak için dahili bir uygulama sunduğundan, setState çağırmamız gerekmez.

Yukarıdaki kod parçacığını kullandığınızda, aşağıdaki sonucu göreceksiniz:

ExpansionPanelRadio kullanım örneği

Başlangıçta belirli bir paneli açmanız gerekiyorsa, aşağıda gösterildiği gibi value parametresiyle eklediğiniz benzersiz tanımlayıcı ile yapabilirsiniz:

 ExpansionPanelList.radio(
  initialOpenPanelValue: 'Adım 0: Flutter'ı Kurun',
  //....
  //...

Burada, tanıtım amacıyla benzersiz value olarak öğe başlık dizesini kullandığımızı unutmayın. Üretim uygulamaları için ürün tanımlayıcısı gibi daha iyi benzersiz bir değer kullandığınızdan emin olun.

İç içe genişletme panelleri oluşturma

Çoğu uygulamada, önceki örneklerimizde olduğu gibi, genişletme panelleri için bir seviye kullanmak yeterlidir. Ancak Flutter ile karmaşık uygulamalar (yani masaüstü uygulamaları) geliştirdiğinizde bazen iç içe genişletme panelleri eklemeniz gerekir.

Flutter widget sistemi o kadar esnektir ki iç içe genişletme panelleri oluşturmanıza olanak tanır. Ancak, bir genişletme paneli için verileri tutacak bir modeli nasıl tanımlayabiliriz?

Gerçekten de Step sınıfı için aşağıdaki gibi özyinelemeli bir tanım kullanabiliriz:

 sınıf Adım {
  Adım(
    bu.başlık,
    bu.vücut,
    [this.subSteps = const <Adım>[]]
  );
  Dize başlığı;
  Dize gövdesi;
  <Adım> alt Adımları Listele;
}

Şimdi, subSteps listesini kullanarak iç içe bir genişletme paneli seti oluşturabiliriz. Aşağıdaki örnek kod, Flutter eğitim uygulamamıza iki alt adımla başka bir adım ekler:

 'package:flutter/material.dart' dosyasını içe aktarın;

void main() => runApp(const MyApp());

class MyApp, StatelessWidget'ı genişletir {
  const Uygulamam({Anahtar? anahtar}) : super(anahtar: anahtar);
  static const String _title = 'Flutter Eğitimi';
  @geçersiz kıl
  Widget derlemesi(BuildContext bağlamı) {
    MaterialApp'ı iade et(
      başlık: _başlık,
      ana sayfa: İskele(
        appBar: AppBar(başlık: const Metin(_title)),
        gövde: const Adımlar(),
      ),
    );
  }
}

sınıf Adım {
  Adım(
    bu.başlık,
    bu.vücut,
    [this.subSteps = const <Adım>[]]
  );
  Dize başlığı;
  Dize gövdesi;
  <Adım> alt Adımları Listele;
}

Liste<Adım> getSteps() {
  dönüş [
    Step('Adım 0: Flutter'ı kurun', 'Flutter geliştirme araçlarını resmi belgelere göre yükleyin.'),
    Adım('Adım 1: Bir proje oluşturun', 'Terminalinizi açın, yeni bir proje oluşturmak için `flutter create <project_name>` komutunu çalıştırın.'),
    Adım('Adım 2: Uygulamayı çalıştırın', 'Terminal dizininizi proje dizinine değiştirin, 'flutter run' girin.'),
    Step('Adım 3: Uygulamanızı oluşturun', 'Bir öğretici seçin:', [
      Step('Bir yapılacaklar uygulaması geliştirme', 'Eğitim videosuna bir bağlantı ekleyin'),
      Step('2 boyutlu oyun geliştirme', 'Eğitim videosuna bir bağlantı ekleyin'),
    ]),
  ];
}

class Steps, StatefulWidget'ı genişletir {
  const Adımlar({Anahtar? anahtar}) : super(anahtar: anahtar);
  @geçersiz kıl
  Durum<Adımlar> createState() => _StepsState();
}

class _StepsState, State<Steps> {'i genişletir
  son Liste<Adım> _steps = getSteps();
  @geçersiz kıl
  Widget derlemesi(BuildContext bağlamı) {
    SingleChildScrollView(
      çocuk: Konteyner(
          alt: _renderSteps(_steps)
      ),
    );
  }

  Widget _renderSteps(Liste<Adım> adımları) {
    ExpansionPanelList.radio(
      çocuklar:steps.map<ExpansionPanelRadio>((Adım adım) {
        ExpansionPanelRadio'yu döndür(
          headerBuilder: (BuildContext bağlamı, bool isExpanded) {
            ListTile'ı döndür(
              başlık: Metin(adım.başlık),
            );
          },
          gövde: ListTile(
            başlık: Metin(adım.body),
            altyazı: _renderSteps(step.subSteps)
          ),
          değer: adım.başlık
        );
      }).Listeye(),
    );
  }
}

Burada, iç içe genişletme panellerini oluşturmak için step.subSteps ile yinelemeli olarak _renderSteps yöntemini çağırıyoruz. Yukarıdaki kodu çalıştırdığınızda, aşağıda gösterildiği gibi son adım için alt adımları göreceksiniz:

Özyinelemeli bir yöntemle iç içe genişletme panellerini uygulama

Yukarıdaki örnek, yalnızca iki iç içe genişletme paneli düzeyi oluşturur, ancak özyinelemeli yöntem daha fazlasını destekler, bu nedenle, üç genişletme düzeyini görüntülemek için getSteps yöntem kaynağını nasıl değiştirebilirsiniz? Yapılacaklar uygulaması geliştirme adımı için alt adımlarınızı geçerek kolayca başka bir genişletme düzeyi ekleyebilirsiniz.

ExpansionPanel ve ExpansionTile karşılaştırması

ExpansionPanel sunduğu tüm özellikleri test ettik. Ardından, benzer bir widget ile karşılaştıralım ve her birini ne zaman kullanmanız gerektiğini tartışalım. ExpansionPanel ile ExpansionTile karşılaştıran aşağıdaki tabloya bakın:

karşılaştırma faktörü ExpansionPanel ExpansionTile
Önerilen ebeveyn widget'ı Yalnızca ExpansionPanelList ListView , Column , Drawer veya tekli veya çoklu widget'ları tutabilen herhangi bir kap türü widget'ı
İçerik/gövde eklemenin desteklenen yolu body parametresi aracılığıyla tek bir widget'ı (genellikle bir ListTile ) kabul eder children parametresi aracılığıyla birden çok widget'ı (tipik olarak ListTile s) kabul eder
Önceden tanımlanmış stil Başlık ve içerik için önceden tanımlanmış bir stil sunmaz — geliştiricinin Malzeme belirtimine göre bir genişletme listesi uygulamak için bir ListTile widget'ı kullanması gerekir. Ayrıca özelleştirilemeyen bir ok simgesi de oluşturur. Bu widget, ListTile bir uzantısı olarak çalıştığından, geliştiricilerin bir başlık ve alt başlık belirlemesine izin vererek başlık için önceden tanımlanmış stil sunar
Desteklenen kullanıcı arayüzü özelleştirmeleri Genişletme durumuna bağlı olarak dinamik işleme için başlık oluşturucu işlevi sunar. Ok simgesi özelleştirilemiyor, ancak varsayılan simge ( ExpandIcon ) Malzeme özelliklerine bağlı. Özel genişletme simgeleri ayarlayabilir, simge konumunu değiştirebilir ve baştaki/sondaki widget'ları ekleyebilir
Eşzamansız veri kaynaklarıyla işleme Her zamanki gibi FutureBuilder örneğiyle mümkün Her zamanki gibi FutureBuilder örneğiyle mümkün

Yukarıdaki karşılaştırmaya göre, ExpansionPanel daha çok kullanıcıların genişletebileceği/daraltabileceği bir içerik widget'ı gibi olduğunu anlayabiliriz, bu nedenle, örneğin ikinci bir ekrana gitmek zorunda kalmadan belirli bir ürün hakkında daha fazla ayrıntı görüntülemek için kullanabiliriz. . Ayrıca, Widget'ları ExpansionPanelRadio widget'ıyla gruplayarak ve bir seferde tek bir widget grubu göstererek karmaşık bir uygulama ekranını basitleştirebilirsiniz.

Öte yandan, ExpansionTile , alt listeler oluşturmaya uygun bir pencere children , çünkü alt listeler parametresinde doğrudan birden çok ListTile s kullanabilirsiniz. Örneğin, ExpansionTile widget'ıyla bir ayarlar paneli veya alt menüsü uygulayabilirsiniz. ExpansionTile ile ayar panellerini uygulama hakkında daha fazla bilgi edinmek için flutter_settings_screens uygulamasına bakın.

Çözüm

Bu öğreticide, çeşitli gereksinimlere dayalı pratik bir örneği değiştirerek Flutter'da ExpansionPanel pencere aracının nasıl kullanılacağını öğrendik. Materyal Tasarımı spesifikasyonuna göre genişletilebilir ayrıntılar bölümleri oluşturmak için bu widget'ı kullanabilirsiniz.

ExpansionPanel , genişletilebilir bir liste eklemenin genel UI gereksinimlerini karşılar, ancak karşılaştırma bölümünde fark ettiğimiz gibi, ExpansionTile ile karşılaştırıldığında bazı sınırlamaları vardır. Bununla birlikte, Malzeme spesifikasyonuna bağlıdır, bu nedenle, ListTile ile birlikte harika, geliştirici dostu genişletilebilir bir liste tasarımı sunduğundan, ExpansionPanel için tipik olarak gelişmiş özelleştirmelere ihtiyacımız yoktur.

ExpansionPanel veya ExpansionTile ile ilgili sınırlamalarla karşılaşırsanız, çarpıntıyla genişletilebilir topluluk paketini kontrol edebilirsiniz. Hem ExpansionPanel hem de ExpansionTile birleşik özelliklerini daha esnek bir şekilde sunar.

Flutter, yüzlerce yerleşik pencere öğesi sunar ve Flutter geliştirme ekibi, geliştirici geri bildirimlerine göre mevcut pencere öğelerini iyileştirmeye çalışır, böylece yeni özellikler veya iyileştirmeler sunabilir, bu sayede alternatif, topluluk tabanlı pencere öğelerinin kullanımdan kaldırılmasına neden olabilir. Bu nedenle, ExpansionPanel ve ExpansionTile gibi yerel widget'ları kullanmak, uygulamanızı kararlı ve Materyal Tasarımı spesifikasyonuyla uyumlu hale getirir.

ExpansionPanel ile bir sonraki uygulama prototipinizin genişletilebilir listesini uygulamayı deneyin!

Flutter'daki ExpansionPanel yazısı: LogRocket Blog'da ilk olarak örnekler içeren bir kılavuz çıktı.

etiketlerETİKETLER
Üzgünüm, bu içerik için hiç etiket bulunmuyor.

Sıradaki içerik:

Flutter'da Genişletme Paneli: Örnekler içeren bir kılavuz