如何使用Listview和Hero动画实现图像(颤振)

时间:2020-11-11 14:53:20

标签: android flutter dart flutter-layout

如何使用Listview和Hero Animation实施图像,在我的案例中,我展示了图像如何处理所使用的抖动

                crossAxisAlignment: CrossAxisAlignment.start,
              mainAxisAlignment: MainAxisAlignment.start,

要使图像设计功能强大,我必须使用它,它必须在最上面,但不能。

我正在运行我的应用程序,我得到了这个信息:

A RenderFlex overflowed by 134 pixels on the bottom.

在我的情况下,当我单击错误提示时,此行:

 leading: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  mainAxisAlignment: MainAxisAlignment.start,
                  children: <Widget>[
                    Hero(
                      tag: _list[index],
                      child: Image(
                        fit: BoxFit.fitWidth,
                        image: AssetImage(_list[index].image),
                        width: 100,
                        height: 190,
                      ),
                    ),
                  ],
                ),

我为此使用Listview和Hero Animation

其中充满了代码:

class ListAndroid extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    // TODO: implement createState
    return ListAndroidState();
  }
}

class ListAndroidState extends State<ListAndroid> {
  List<Android> _list = new List();

  ListAndroidState() {
    _list.add(new Android(
      "Ancol Jakarta",
      "images/ancoljakarta.png",
      "Destinasi di tepi laut Ancol memiliki pantai yang populer untuk olahraga air dan kompleks di tepi laut yang dilengkapi rollercoaster serta wahana di Dunia Fantasi dan taman rekreasi air Atlantis Water Adventure. Keluarga juga dapat menikmati akuarium SeaWorld dengan hiu dan kura-kuranya, serta Ocean Dream Samudra yang menampilkan pertunjukan lumba-lumba dan singa laut. Pasar Seni Ancol menampilkan seniman lokal yang baru muncul dan mengadakan pertunjukan tarian di akhir pekan",
    ));
    _list.add(new Android("Dieng Wonosobo", "images/diengwonosobo.png",
        "Dataran Tinggi Dieng adalah kawasan vulkanik aktif di Jawa Tengah, yang masuk wilayah Kabupaten Banjarnegara dan Kabupaten Wonosobo. Letaknya berada di sebelah barat kompleks Gunung Sindoro dan Gunung Sumbing. Dieng memiliki Ketinggian rata-rata adalah sekitar 2.000 m di atas permukaan laut."));
    _list.add(new Android(
        "Green Canyon Jawa Barat",
        "images/greencanyonjawabarat.png",
        "Cukang Taneuh atau Green Canyon adalah salah satu objek wisata di Jawa Barat yang terletak di Desa Kertayasa Kecamatan Cijulang, Kabupaten Pangandaran. Objek wisata ini berjarak ± 31 km dari Pangandaran."));
    _list.add(new Android("Jeep Jogja", "images/jeepjogja.png",
        "Yogyakarta, nampaknya menjadi salah satu kota yang wajib dikunjungi bagi para traveler. Selain menjadi kota dengan budaya Jawa yang cukup kental, Yogyakarta juga memiliki segudang destinasi wisata menarik bagi para wisatawan."));
    _list.add(new Android(
        "Kampung Wisata Bogor ",
        "images/kampungwisatabogor.png",
        "Berlibur adalah waktu yang sangat spesial untuk anak anak setelah lelah belajar selama seminggu. Namun jika anda ingin mengajak anak untuk berlibur tanpa menyianyiakan waktunya, maka tak ada salahnya untuk berkunjung ke Kampung Bambu yang ada di Kota Bogor. Wisata edukasi ini menawarkan banyak sekali keseruan yang akan membuat anak belajar sekaligus berlibur. Yuk simak ulasan selengkapnya berikut."));
    _list.add(new Android("Karimun Jawa", "images/karimunjawa.png",
        "Karimunjawa adalah kepulauan di Laut Jawa yang termasuk dalam Kabupaten Jepara, Jawa Tengah. Dengan luas daratan ±1.500 hektare dan perairan ±110.000 hektare, Karimunjawa kini dikembangkan menjadi pesona wisata Taman Laut yang mulai banyak digemari wisatawan lokal maupun mancanegara."));
    _list.add(new Android("Taman Safari", "images/tamansafari.png",
        "Taman Safari Indonesia adalah tempat wisata keluarga berwawasan lingkungan yang berorientasi pada habitat satwa di alam bebas. Taman Safari Indonesia terletak di Desa Cibeureum Kecamatan Cisarua, Kabupaten Bogor, Jawa Barat atau yang lebih dikenal dengan kawasan Puncak."));
  }

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(
        title: Text("wisata"),
        backgroundColor: Colors.green,
        centerTitle: true,
      ),
      body: ListView.builder(
          itemCount: _list.length,
          itemBuilder: (context, index) => ListTile(
                onTap: () {
                  Navigator.push(
                    context,
                    new MaterialPageRoute(
                        builder: (context) => DetailPage(_list[index])),
                  );
                },
                title: Row(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: <Widget>[
                    Text(
                      _list[index].name,
                      style:
                          TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
                      textAlign: TextAlign.start,
                    ),
                  ],
                ),
                leading: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  mainAxisAlignment: MainAxisAlignment.start,
                  children: <Widget>[
                    Hero(
                      tag: _list[index],
                      child: Image(
                        fit: BoxFit.fitWidth,
                        image: AssetImage(_list[index].image),
                        width: 100,
                        height: 190,
                      ),
                    ),
                  ],
                ),
              )),
    );
  }
}

这是结果:

enter image description here

0 个答案:

没有答案