Każda alternatywa dla rozszerzonych widżetów przy użyciu ListView.builder

Nov 28 2020

Muszę zaprojektować ekran, który będzie pokazywał inny widżet (selectedWidget) w zależności od tego, który przycisk jest wybrany. Problem polega na tym, że zawartość jest dynamiczna i muszę używać ListView.builder dla wszystkich interfejsów API. ListView.builder działa tylko wtedy, gdy wiersz zawierający widok listy jest zawinięty w widżet rozszerzony. Chcę mieć dwa przyciski tuż pod moim ListView, czego nie jestem w stanie osiągnąć z powodu widżetu Expanded, który zakrywa całą kolumnę, w której jest obecny ListView.

To jest projekt, którego potrzebuję.

Kod podaje podstawową strukturę, której używałem. selectedWidget to widget ListView.builder, który zostanie wybrany zgodnie z wybranym FlatButton. Również kolumna zawierająca wybrany widget ma dynamiczną wysokość. Powinien dostosować się do rozmiaru widoku listy, więc nie mogę zdefiniować stałej wysokości ani nawet maxHeight. W tym miejscu mogę podać tylko wartość minHeight. A dwa przyciski poniżej mojego ListView powinny znajdować się tuż pod moim ListView i przyjmować szerokość kolumny z flex 3.

Próbowałem również wyłączyć przewijanie dla ListView i użyć SingleChildScrollView, ale wtedy moje dwa przyciski poniżej ListView również zaczną przewijać, czego nie chcę. Potrzebuję, aby były statyczne na ekranie i tylko ListView powinien się przewijać.

Potrzebuję rozwiązania powyższego problemu. Potrzebuję obejścia tego widżetu rozszerzonego, który nie pozwala mi wyrównać przycisków bezpośrednio pod moim widokiem listy i daje spację. Udostępnij, jeśli istnieje alternatywa dla ListView.builder, ponieważ nie sądzę, żebym mógł używać ListView.builder bez widżetu Expanded. Wypróbowałem każdą możliwą strukturę z widżetem ListView i Expanded.

class MyScreen extends StatefulWidget {
  @override
  _MyScreenState createState() => _MyScreenState();
}

class _MyScreenState extends State<MyScreen> {
  @override
  Widget build(BuildContext context) {
    return Column(
    children:[
      Expanded(
          child: Row(
          Expanded(flex: 2,
            child: Column(
                children: [
                    FlatButton(),
                    FlatButton(),
                    FlatButton(),
                    FlatButton(),
                ]
            )
           ),
          Expanded(flex: 3, 
            child: Column(
                children: [
                    Expanded(selectedWidget),
                    Row(children: [FlatButton(), FlatButton()], )
                ]
            )
          ),
      )
      )
    ],);
  }
  
}

Odpowiedzi

yellowgray Nov 30 2020 at 17:01

Może możesz użyć Flexiblei ustawić shrinkWrap: true,wewnątrz ListView. Następujące 2 przyciski mogą Expandpo tym nie wymagać widżetu.

child: Column(
  children: [
    Flexible(
      child: ListView.builder(
        shrinkWrap: true,
        itemBuilder: (BuildContext context, int index) => Text(index.toString()),
        itemCount: 6,
      ),
    ),
    Row(
      ... // 2 Buttons