Saya memiliki Formulir, dan di dalamnya saya memiliki beberapa bidang teks dan tampilan gulir horizontal tempat saya dapat mengunggah beberapa gambar.

Bentuknya memiliki lebar yang lebih kecil dari layar, sehingga tampilan daftar juga terpengaruh. Saya ingin tampilan daftar ini meluap dari orang tuanya dan selebar layar ponsel.

Bagaimana saya bisa melakukannya? Saya mencoba dengan OverflowBox tetapi saya mendapatkan kesalahan. Inilah kode kerja saya:

class HorizontalScrollWidget extends StatelessWidget {

 @override
 Widget build(BuildContext context) {
   return
     Container(
       child: Column(
         children: [
           Container(
             child: AutoSizeText(
               ".....",
               maxLines: 1,
               style: ....,
             ),
           ),
           _buildFeaturedCards(5),
         ],
       ),
     );
 }
}

Widget _buildFeaturedCards(int maxLength) {
 final cards = <Widget>[];
 Widget ScrollableCardsRow;

 if (maxLength > 0) {
   for (int i = 0; i < maxLength; i++) {
     cards.add( SquarePhotoElement() );
   }
   ScrollableCardsRow = Container(
     // TODO: OverflowBox??
     child: Column(
       children: <Widget>[
         SingleChildScrollView(
           scrollDirection: Axis.horizontal,
           child: Row(children: cards),
         ),
       ],
     ),
   );
 } else {
   ScrollableCardsRow = Container();
 }
 return ScrollableCardsRow;
}

Terima kasih untuk bantuannya

0
Giammarco Boscaro 22 Desember 2020, 14:48

3 jawaban

Jawaban Terbaik

Tidak mungkin membiarkan anak lebih besar dari orang tua, atau setidaknya bertentangan dengan pola desain. Ketika Anda melakukan itu, hitTest akan gagal. Dengan kata lain, jika anak Anda (misalnya C) lebih besar dari orang tua (misalnya P), dan Anda mengetuk lokasi di mana C ditampilkan tetapi P tidak, maka C tidak akan pernah menerima acara ketukan apa pun. Ini karena orang tua P berpikir bahwa "oh tap itu di luar wilayah saya jadi saya abaikan saja". Kemudian P tidak pernah menerima ketukan itu, jadi C tidak pernah melihat acara itu. Jadi, refactor pohon widget Anda untuk menghindari hal ini.

Cara lain adalah dengan menggunakan Overlay (atau menggunakan Portal library yang merupakan pembungkus Overlay). Overlay tidak dibatasi oleh itu.

1
ch271828n 22 Desember 2020, 12:08

Gunakan properti width dari Container Anda untuk width: double.infinity seperti ini

class HorizontalScrollWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      width: double.infinity,
      child: Column(
        children: [
          Container(
            child: AutoSizeText(
              ".....",
              maxLines: 1,
              style: ....,
            ),
          ),
          _buildFeaturedCards(5),
        ],
      ),
    );
  }


  Widget _buildFeaturedCards(int maxLength) {
    final cards = <Widget>[];
    Widget ScrollableCardsRow;

    if (maxLength > 0) {
      for (int i = 0; i < maxLength; i++) {
        cards.add( SquarePhotoElement() );
      }
      ScrollableCardsRow = Container(
        // TODO: OverflowBox??
        width: double.infinity,
        child: Column(
          children: <Widget>[
            SingleChildScrollView(
              scrollDirection: Axis.horizontal,
              child: Row(children: cards),
            ),
          ],
        ),
      );
    } else {
      ScrollableCardsRow = Container();
    }
    return ScrollableCardsRow;
  }
}
0
dm_tr 22 Desember 2020, 12:15

Saya harap solusi di atas bekerja dengan baik untuk Anda, tetapi jika tidak, Anda juga dapat mencoba kode di bawah ini. Di sini Anda hanya perlu meneruskan daftar ke pembuat tampilan kisi yang dibungkus di dalam Fleksibel.

       Flexible(
            child: GridView.builder(
                itemCount: listProducts.length ,
                scrollDirection: Axis.horizontal,
                gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                  crossAxisCount: 1,
                  mainAxisSpacing: 0,
                  childAspectRatio: 2,
                ),
                itemBuilder: (BuildContext context, int index) {
                  return Text("");
                })),
0
Muhammad Tameem Rafay 22 Desember 2020, 13:30