InkWell tidak menunjukkan efek riak

96

Mengetuk wadah akan memicu onTap()penangan tetapi tidak menunjukkan efek percikan tinta apa pun.

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text(widget.title),
      ),
      body: new Center(
        child: new InkWell(
          onTap: (){print("tapped");},
          child: new Container(
            width: 100.0,
            height: 100.0,
            color: Colors.orange,
          ),
        ),
      ),
    );
  }
}

Saya mencoba memasukkan bagian InkWelldalam Containerjuga tetapi sia-sia.

flutter  dart  flutter-layout 
— J. Sarkar
sumber

Jawaban:

152

Saya pikir menambahkan warna ke wadah menutupi efek tinta

https://docs.flutter.io/flutter/material/InkWell/InkWell.html

Kode ini sepertinya berfungsi

  body: new Center(
    child: new Container(
      child: new Material(
        child: new InkWell(
          onTap: (){print("tapped");},
          child: new Container(
            width: 100.0,
            height: 100.0,
          ),
        ),
        color: Colors.transparent,
      ),
      color: Colors.orange,
    ),
  ),

cukup klik kotak tengah.

Edit: Saya menemukan laporan bug. https://github.com/flutter/flutter/issues/3782

Ini sebenarnya seperti yang diharapkan, meskipun kami harus memperbarui dokumen untuk membuatnya lebih jelas.

Apa yang terjadi adalah spesifikasi Material mengatakan bahwa percikan sebenarnya adalah tinta pada Material. Jadi saat kita melakukan splash, yang kita lakukan adalah kita memiliki widget Material melakukan splash. Jika Anda memiliki sesuatu di atas Materi, kami memercik di bawahnya, dan Anda tidak dapat melihatnya.

Saya ingin menambahkan widget "MaterialImage" yang secara konseptual mencetak gambarnya ke Material juga sehingga percikan akan melewati gambar. Kita bisa memiliki MaterialDecoration yang melakukan hal serupa untuk Dekorasi. Atau kita bisa meminta Material itu sendiri mengambil dekorasi. Saat ini membutuhkan warna, tapi kita bisa memperluasnya ke mengambil keseluruhan dekorasi. Tidak jelas apakah itu benar-benar material-spec-kompatibel untuk memiliki material dengan gradien, jadi saya tidak yakin apakah kita harus melakukannya.

Dalam jangka pendek, jika Anda hanya membutuhkan solusi, Anda dapat meletakkan Material di atas wadah, dengan material yang disetel untuk menggunakan jenis "transparansi", dan kemudian meletakkan tinta dengan baik di dalamnya.

--hixie

Pembaruan: Hixie menggabungkan solusi Tinta baru tahun lalu. Tinta memberikan cara yang nyaman untuk memercikkan gambar.

  testWidgets('Does the Ink widget render anything', (WidgetTester tester) async {
    await tester.pumpWidget(
      new Material(
        child: new Center(
          child: new Ink(
            color: Colors.blue,
            width: 200.0,
            height: 200.0,
            child: new InkWell(
              splashColor: Colors.green,
              onTap: () { },
            ),
          ),
        ),
      ),
    );


Material(
  color: Colors.grey[800],
  child: Center(
    child: Ink.image(
      image: AssetImage('cat.jpeg'),
      fit: BoxFit.cover,
      width: 300.0,
      height: 200.0,
      child: InkWell(
        onTap: () { /* ... */ },
        child: Align(
          alignment: Alignment.topLeft,
          child: Padding(
            padding: const EdgeInsets.all(10.0),
            child: Text('KITTEN', style: TextStyle(fontWeight: FontWeight.w900, color: Colors.white)),
          ),
        )
      ),
    ),
  ),
)

Harap Dicatat: Saya tidak menguji Widget Tinta baru. Saya mengatasi kode dari ink_paint_test.dart dan dokumen kelas Ink

https://github.com/Hixie/flutter/blob/1f6531984984f52328e66c0cd500a8d517964564/packages/flutter/test/material/ink_paint_test.dart

https://github.com/flutter/flutter/pull/13900

https://api.flutter.dev/flutter/material/Ink-class.html

— pengguna1462442
sumber
2
Anda bisa meletakkan warna pada bagian Materialitu sendiri dan mengabaikan Container.
— Herohtar
1
Saya agak tahu ketika CopsOnRoad memposting jawabannya.
— pengguna1462442
1
@KoenVanLen Coba jawaban Centang. Saya tidak mengedit solusi saya karena solusi CopsOnRoad cukup elegan
— user1462442
Itulah yang saya gunakan setelah beberapa refactoring: D terima kasih
— Koen Van Looveren
dalam kasus saya itu adalah bentuk wadah, terima kasih untuk solusinya
— Mohammad Ersan
106

Keluaran:

masukkan deskripsi gambar di sini

Cukup gunakan Inkwidget yang dibungkus dengan InkWell.

InkWell(
  onTap: () {}, // needed
  child: Ink( // use Ink
    width: 200,
    height: 200,
    color: Colors.blue,
  ),
)
— CopsOnRoad
sumber
Sumber mengonfirmasi langkah 3: github.com/flutter/flutter/blob/… Di setiap penangan mereka memeriksa apakah callback tersedia, jika tidak, tidak ada yang terjadi.
— Nightking
@CopsOnRoad, bolehkah saya meminta Anda untuk memiliki pertanyaan terkait flutter di sini: stackoverflow.com/questions/60539378/… ?
— Istiaque Ahmed
Jika dengan kode lengkap yang Anda maksud contoh yang Anda berikan maka ya. Saya telah menemukan ini sebagai solusinya> stackoverflow.com/a/58556613/12140067
— Chris
@Chris Saya pikir Anda mungkin mengalami beberapa Theme'atau Material' gangguan, karena kode ini bekerja sepanjang hari.
— CopsOnRoad
1
ini adalah satu-satunya solusi yang berhasil untuk saya
— easazade
24

InkWell () tidak akan pernah memperlihatkan efek riak sampai Anda menambahkan

onTap : () {}

atau salah satu callback seperti onDoubleTap, onLongPress, dll.

parameter di dalam InkWell saat mulai mendengarkan ketukan Anda hanya saat Anda menentukan parameter ini.

— Jaswant Singh
sumber
Ya saya lakukan, dan itu benar. Periksa sumbernya: github.com/flutter/flutter/blob/… Di setiap penangan mereka memeriksa apakah callback tersedia, jika tidak, tidak ada yang terjadi.
— Nightking
17

  1. Widget InkWell harus memiliki widget Material sebagai leluhur jika tidak maka tidak dapat menampilkan efek. Misalnya:

    Material(
  child : InkWell(
    child : .....

  2. Anda harus menambahkan onTapmetode untuk melihat efek yang sebenarnya

     Buttons {RaisedButton,FlatButton etc}.
 e.g -> Material(
             child : InkWell(
                     onTap : (){}
                     child : .....

Mari sampai pada poin utama, lihat beberapa contoh di bawah ini dan coba pahami konsep InkWell yang sebenarnya.

  • Dalam contoh di bawah ini, Material adalah induk dari InkWell dengan onTap tetapi masih tidak berfungsi. Silakan coba untuk memahami konsepnya. Anda harus memberikan beberapa margin ke container atau widget lain untuk menunjukkan efeknya. Sebenarnya kode di bawah berfungsi dengan baik tetapi kami tidak dapat melihat karena kami tidak memberikan margin atau align sehingga tidak ada ruang untuk menunjukkan efeknya.

    Widget build(BuildContext context) {
  return Center(
    child: Material(
      child: new InkWell(
        onTap: () {
          print("tapped");
        },
        child: new Container(
          width: 100.0,
          height: 100.0,
          color: Colors.orange,
        ),  
      ),
    ),
  );
}

  • Contoh di bawah ini memperlihatkan efek InkWell hanya ke atas karena kami menyediakan spasi {margin}.

    Widget build(BuildContext context) {
  return Center(
    child: Material(
      child: new InkWell(
        onTap: () {
          print("tapped");
        },
        child: new Container(
          margin: EdgeInsets.only(top: 100.0),
          width: 100.0,
          height: 100.0,
          color: Colors.orange,
        ),
      ),
    ),
  );
}

  • Di bawah exp. menunjukkan efek di semua halaman karena pusat membuat margin dari semua sisi. Rata tengah widget anak itu dari atas, kiri, kanan dan bawah.

    Widget build(BuildContext context) {
  return Center(
    child: Material(
      child: new InkWell(
        onTap: () {
          print("tapped");
        },
        child: Center(
          child: new Container(
            width: 100.0,
            height: 100.0,
            color: Colors.orange,
          ),
        ),
      ),
    ),
  );
 }
— 97loser
sumber
9

Cara yang lebih baik adalah menggunakan Inkwidget daripada menggunakan widget lainnya.

Alih-alih menentukan colordi dalam penampung, Anda dapat menentukannya dalam Inkwidget itu sendiri.

Kode di bawah ini akan berfungsi.

Ink(
  color: Colors.orange,
  child: InkWell(
    child: Container(
      width: 100,
      height: 100,
    ),
    onTap: () {},
  ),
)

Jangan lupa tambahkan onTap: () {}di bagian InkWelllain karena tidak akan menunjukkan efek riak juga.

— ibhavikmakwana
sumber
4

Saya telah menemukan solusi ini untuk saya. Saya rasa ini dapat membantu Anda:

Material(
      color: Theme.of(context).primaryColor,
      child: InkWell(
        splashColor: Theme.of(context).primaryColorLight,
        child: Container(
          height: 100,
        ),
        onTap: () {},
      ),
    )

Colordiberikan ke widget Material. Ini adalah warna default widget Anda. Anda dapat mengatur warna efek riak menggunakan splashColorproperti Inkwell.

— Kanan Yusubov
sumber
3

Ini adalah cara terbaik yang saya temukan dan selalu gunakan. Kamu bisa mencobanya.

  • Bungkus WidgetdenganInkWell
  • Bungkus InkWelldenganMaterial

  • Setel opacity 0% bagaimanapun juga. misalnya:color: Colors.white.withOpacity(0.0),

    Material(
  color: Colors.white.withOpacity(0.0),
  child: InkWell(
    child: Container(width: 100, height: 100),
    onTap: (){print("Wow! Ripple");},
  ),
)
— Sa Sadik
sumber
2

Saya mengalami masalah yang sama ini mencoba membuat warna bolak-balik dari InkWell di ListView. Dalam kasus khusus tersebut, ada solusi sederhana: bungkus alternatif dalam Wadah yang sebagian besar menggunakan perubahan warna / kecerahan transparan - animasi sentuh InkWell akan tetap terlihat di bawahnya. Tidak ada Bahan yang dibutuhkan. Perhatikan ada masalah lain ketika mencoba untuk mengatasi ini dengan Materal - misalnya, ini akan menimpa DefaultTextStyle yang Anda gunakan dengan default (ini menginstal AnimatedDefaultTextStyle) yang sangat merepotkan.

— pengguna3483238
sumber
2

Ini bekerja untuk saya:

Material(
    color: Colors.white.withOpacity(0.0),
    child: InkWell(
      splashColor: Colors.orange,
      child: Text('Hello'), // actually here it's a Container wrapping an image
      onTap: () {
        print('Click');
      },
    ));

Setelah mencoba banyak jawaban di sini, itu adalah kombinasi dari:

  1. Pengaturan splashColor
  2. Wrapping InkWelldiMaterial(color: Colors.white.withOpacity(0.0), ..)

Berkat jawaban di sini yang membuat 2 poin itu

— Gene Bo
sumber
1

Setelah Anda menambahkan onTap:(){}pendengar, efek riak seharusnya berfungsi dengan baik. Tidak berfungsi jika Anda menggunakan BoxShadow()dengan di InkWell()widget.

— Aruna Warnasooriya
sumber
Itulah triknya. Ripple tidak akan berfungsi tanpa onTap (). Terima kasih sobat!
— Hardik Joshi
0

Saya terkena masalah serupa menambahkan Inkwell ke Widget kompleks yang ada dengan Container yang membungkus BoxDecoration dengan warna. Dengan menambahkan Material dan Inkwell dengan cara yang disarankan bahwa Inkwell masih dikaburkan oleh BoxDecoration jadi saya hanya membuat warna BoxDecoration sedikit buram yang memungkinkan Inkwell terlihat.

— Lee McLoughlin
sumber
0

Solusi untuk widget melingkar, lakukan seperti di bawah ini:

Material(
    color: Colors.transparent,
    child: Container(
      alignment: Alignment.center,
      height: 100,
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceAround,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          IconButton(
              enableFeedback: true,
              iconSize: 40,
              icon: Icon(
                Icons.skip_previous,
                color: Colors.white,
                size: 40,
              ),
              onPressed: () {}),
          IconButton(
            iconSize: 100,
            enableFeedback: true,
            splashColor: Colors.grey,
            icon: Icon(Icons.play_circle_filled, color: Colors.white, size: 100),
            padding: EdgeInsets.all(0),
            onPressed: () {},
          ),
          IconButton(
              enableFeedback: true,
              iconSize: 40,
              icon: Icon(
                Icons.skip_next,
                color: Colors.white,
                size: 40,
              ),
              onPressed: () {}),
        ],
      ),
    ),
  )
— Edeson Bizerril
sumber
0

Bagi saya itu masalah lain. InkWell tidak menunjukkan efek riak ketika saya memiliki fungsi onTap sebagai parameter widget saya yang ditentukan seperti di bawah ini.

Function(Result) onTapItem;
...
onTap: onTapItem(result),

Saya tidak tahu apa bedanya, tetapi kode berikutnya berfungsi dengan baik.

onTap: (){ onTapItem(result); },
— bodoh
sumber
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.