InkWell dalgalanma efekti göstermiyor

Kaba dokunmak, onTap()işleyiciyi tetikler ancak herhangi bir mürekkep sıçrama etkisi göstermez.

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,
          ),
        ),
      ),
    );
  }
}

InkWellİçini de koymaya çalıştım Containerama boşuna.

Bence kaba renk katmak mürekkep efektini kapatıyor

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

Bu kod çalışıyor gibi görünüyor

  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,
    ),
  ),

sadece ortadaki kareyi tıklayın.

Düzenleme: Hata raporunu buldum. https://github.com/flutter/flutter/issues/3782

Bu aslında beklendiği gibi, ancak daha net hale getirmek için dokümanları güncellemeliyiz.

Olan şey, Materyal spesifikasyonunun, sıçramaların aslında Materyal üzerindeki mürekkep olduğunu söylemesidir. Yani sıçradığımızda, yaptığımız şey kelimenin tam anlamıyla Malzeme parçacığının sıçrama yapmasıdır. Materyalin üstünde bir şey varsa, altına sıçrarız ve onu göremezsin.

Görselini kavramsal olarak Materyal'e de yazdıran bir "MaterialImage" parçacığı eklemek istedim, böylece sıçramalar görüntünün üzerine gelsin. Bir Dekorasyon için benzer bir şey yapan bir MateryalDekorasyonumuz olabilir. Ya da Materyal'in kendisine bir dekorasyon almasını sağlayabiliriz. Şu anda bir renk alıyor, ancak bunu bütün bir dekorasyona kadar genişletebiliriz. Gradyanlı bir malzemeye sahip olmanın gerçekten malzeme spesifikasyonuna uygun olup olmadığı net değil, bu yüzden bunu yapmamız gerekip gerekmediğinden emin değilim.

Kısa vadede, sadece bir geçici çözüme ihtiyacınız varsa, kabın üstüne bir Malzeme koyabilirsiniz, malzeme "saydam" tipini kullanacak şekilde ayarlanmış ve sonra mürekkebi bunun içine iyice yerleştirebilirsiniz.

--hixie

Güncelleme: Hixie geçen yıl yeni bir Ink çözümünü birleştirdi. Mürekkep, görüntülerin üzerine sıçramak için uygun bir yol sağlar.

  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)),
          ),
        )
      ),
    ),
  ),
)

Lütfen Dikkat: Yeni Ink Widget'ı test etmedim. Ink_paint_test.dart ve Ink sınıfı belgelerinden kodu başardım

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

Çıktı:

Basitçe kullanmak Inkwidget sarılmış InkWell.

InkWell(
  onTap: () {}, // needed
  child: Ink( // use Ink
    width: 200,
    height: 200,
    color: Colors.blue,
  ),
)

InkWell (), siz ekleyene kadar asla dalgalanma efektini göstermez.

onTap : () {} 

veya onDoubleTap, onLongPress vb. gibi geri aramalardan herhangi biri

InkWell içindeki parametre, yalnızca bu parametreyi belirttiğinizde dokunuşlarınızı dinlemeye başlar.

1. InkWell parçacığının atası olarak bir Malzeme parçacığı olmalıdır, aksi takdirde efektleri gösteremez. Örneğin:

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

2. onTapgerçek efektleri olduğu gibi görmek için yöntem eklemelisiniz

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

Ana noktalara gelelim, aşağıdaki bazı örnekleri görelim ve InkWell'in gerçek kavramlarını anlamaya çalışalım.

• Aşağıdaki örnekte Malzeme, onTap ile InkWell'in ebeveynidir, ancak yine de çalışmıyor. Lütfen bunun kavramını anlamaya çalışın. Etkileri göstermek için kapsayıcıya veya başka bir parçacığa biraz kenar boşluğu sağlamalısınız. Aslında aşağıda kod iyi çalışıyor, ancak göremiyoruz çünkü herhangi bir kenar boşluğu veya hizalama yapmadık, bu yüzden etkileri gösterecek alan yok.

  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,
          ),  
        ),
      ),
    );
  }
  

• Aşağıdaki örnek, InkWell efektlerini yalnızca yukarı doğru gösterir çünkü boşluk {margin} sağlıyoruz.

  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,
          ),
        ),
      ),
    );
  }
  

• Exp altında. etkileri tüm sayfada gösterin çünkü merkez her taraftan kenar boşluğu oluşturur. Alt widget'ını üstten, soldan, sağdan ve alttan ortaya hizalayın.

  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,
            ),
          ),
        ),
      ),
    );
   }
  

Daha iyi bir yol, Inkbaşka herhangi bir widget yerine widget'ı kullanmaktır.

colorKonteynerin içini tanımlamak yerine onu Inkwidget'ın kendisinde tanımlayabilirsiniz .

Aşağıdaki kod çalışacaktır.

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

Bir eklemeyi unutmayın onTap: () {}de InkWellçok dalgalanma etkisi göstermez başka.

Bu çözümü kendim için buldum. Size yardımcı olabileceğini düşünüyorum:

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

ColorMalzeme widget'ına verilir. Widget'ınızın varsayılan rengidir. splashColorInkwell'in özelliğini kullanarak dalgalanma efektinin rengini ayarlayabilirsiniz .

Bu, onu bulduğum ve her zaman kullandığım en iyi yol. Deneyebilirsin.

• Şu Verilerinizi sarın WidgetileInkWell
• Wrap InkWellileMaterial

• Opaklığı yine de% 0 olarak ayarlayın. Örneğin: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");},
    ),
  )
  

ListView'da InkWell'in alternatif rengini oluşturmaya çalışırken aynı problemle karşılaştım. Bu özel durumda, basit bir çözüm var: alternatifleri çoğunlukla şeffaf bir renk tonu / parlaklık değişikliği kullanan bir Kap içine sarın - InkWell dokunma animasyonu bunun altında görünmeye devam edecek. Materyal gerekmez. Bunu bir Materal ile çözmeye çalışırken başka sorunlar olduğunu unutmayın - örneğin, kullandığınız bir DefaultTextStyle'ı varsayılan olarak geçersiz kılar (bir AnimatedDefaultTextStyle'ı yükler) ki bu çok büyük bir acıdır.

Bu benim için çalışıyor:

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');
      },
    ));

Burada birçok cevabı denedikten sonra, şunların bir kombinasyonuydu:

1. Ayar splashColor
2. sarma InkWelliçindeMaterial(color: Colors.white.withOpacity(0.0), ..)

Buradaki 2 puanı yapan cevaplar sayesinde

onTap:(){}Dinleyici ekledikten sonra dalgalanma efekti düzgün çalışmalıdır. Kullanmak eğer çalışmaz BoxShadow()içinde olan InkWell()widget'ı.

Bir BoxDecoration'ı bir renkle saran bir Konteyner ile mevcut karmaşık bir Widget'a bir Inkwell eklerken benzer bir sorunla karşılaştım. Materyal ve Inkwell'i önerilen şekilde ekleyerek, Inkwell'in BoxDecoration tarafından hala gizlendiğini, bu yüzden BoxDecoration'un rengini biraz opak yaparak Inkwell'in görülmesini sağladım.

Dairesel widget'ların çözümü aşağıdakileri yapın:

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: () {}),
        ],
      ),
    ),
  )

Benim için başka bir sorundu. Aşağıda tanımlanan widget'ımın parametresi olarak onTap işlevine sahip olduğumda InkWell dalgalanma efekti göstermiyordu.

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

Farkın ne olduğunu bilmiyorum ama sonraki kod iyi çalışıyor.

onTap: (){ onTapItem(result); },