Alternatif apa pun untuk widget yang Diperluas yang digunakan dengan ListView.builder

Nov 28 2020

Saya perlu merancang layar yang menampilkan widget berbeda (selectedWidget) tergantung tombol mana yang dipilih. Masalahnya adalah kontennya dinamis dan saya harus menggunakan ListView.builder untuk semua API. Dan ListView.builder hanya berfungsi jika Baris yang berisi tampilan daftar dibungkus dalam widget yang Diperluas. Saya ingin memiliki dua tombol tepat di bawah ListView saya, yang tidak dapat saya capai karena widget yang Diperluas yang menutupi seluruh Kolom tempat ListView ada.

Ini adalah desain yang saya butuhkan.

Kode memberikan struktur dasar yang telah saya gunakan. selectedWidget adalah widget ListView.builder yang akan dipilih sesuai dengan FlatButton yang dipilih. Juga Kolom yang berisi selectedWidget memiliki tinggi dinamis. Ini harus menyesuaikan dengan ukuran listview, jadi saya tidak dapat menentukan ketinggian tetap atau bahkan maxHeight. Saya hanya bisa memberikan minHeight di sini. Dan dua tombol di bawah ListView saya harus tepat di bawah ListView saya dan mengambil lebar Kolom dengan flex 3.

Saya juga mencoba menonaktifkan gulir untuk ListView dan menggunakan SingleChildScrollView, tetapi kemudian dua tombol saya di bawah ListView juga mulai bergulir, yang tidak saya inginkan. Saya membutuhkannya untuk menjadi statis di layar dan hanya ListView yang harus digulir.

Saya butuh solusi untuk masalah di atas. Saya memerlukan solusi untuk widget yang Diperluas ini yang tidak memungkinkan saya menyelaraskan tombol saya tepat di bawah tampilan daftar saya dan memberi ruang putih. Silakan bagikan jika ada alternatif untuk ListView.builder karena saya rasa saya tidak dapat menggunakan ListView.builder tanpa widget yang Diperluas. Saya telah mencoba setiap struktur yang mungkin dengan widget ListView dan 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()], )
                ]
            )
          ),
      )
      )
    ],);
  }
  
}

Jawaban

yellowgray Nov 30 2020 at 17:01

Mungkin Anda bisa menggunakan Flexibledan mengatur shrinkWrap: true,di dalam ListView. 2 tombol berikut mungkin tidak memerlukan Expandwidget setelah itu.

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