Myślę, że dodanie koloru do pojemnika przesłania efekt tuszu
https://docs.flutter.io/flutter/material/InkWell/InkWell.html
Ten kod wydaje się działać
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,
),
),
po prostu kliknij środkowy kwadrat.
Edycja: znalazłem raport o błędzie. https://github.com/flutter/flutter/issues/3782
W rzeczywistości jest to zgodne z oczekiwaniami, chociaż powinniśmy zaktualizować dokumentację, aby była bardziej przejrzysta.
Chodzi o to, że specyfikacja materiału mówi, że plamy są w rzeczywistości atramentem na materiale. Więc kiedy się rozpryskujemy, dosłownie mamy widżet Material, który robi to splash. Jeśli masz coś na wierzchu Materiału, rozpryskujemy się pod tym i nie możesz tego zobaczyć.
Chciałem dodać widżet „MaterialImage”, który koncepcyjnie drukuje również swój obraz w materiale, tak aby plamy były nad obrazem. Moglibyśmy mieć MaterialDecoration, który robi coś podobnego do dekoracji. Albo możemy poprosić o dekorację samego Materiału. W tej chwili przybiera kolor, ale możemy to rozszerzyć na całą dekorację. Nie jest jednak jasne, czy posiadanie materiału z gradientem jest naprawdę zgodne ze specyfikacją materiału, więc nie jestem pewien, czy powinniśmy to zrobić.
Na krótką metę, jeśli potrzebujesz tylko obejścia tego problemu, możesz umieścić materiał na wierzchu pojemnika, z materiałem ustawionym na typ „przezroczystości”, a następnie dobrze włożyć atrament.
--hixie
Aktualizacja: Hixie połączyła w zeszłym roku nowe rozwiązanie Ink. Atrament zapewnia wygodny sposób na rozpryskiwanie się po obrazach.
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)),
),
)
),
),
),
)
Uwaga: nie testowałem nowego widżetu Ink. Skopiowałem kod z ink_paint_test.dart i dokumenty klasy 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
Material
siebie i pominąćContainer
.Wynik:
Po prostu użyj
Ink
widżetu opakowanego w plikInkWell
.InkWell( onTap: () {}, // needed child: Ink( // use Ink width: 200, height: 200, color: Colors.blue, ), )
źródło
Theme
„lubMaterial
”, ponieważ ten kod działa przez cały dzień.InkWell () nigdy nie pokaże efektu tętnienia, dopóki nie dodasz
lub jakiekolwiek wywołania zwrotne, takie jak onDoubleTap, onLongPress itp.
parametr wewnątrz InkWell, ponieważ zaczyna nasłuchiwać twoich dotknięć tylko po określeniu tego parametru.
źródło
Widget InkWell musi mieć jako przodek widget Material, w przeciwnym razie nie będzie mógł wyświetlać efektów. Na przykład:
musisz dodać
onTap
metodę, aby zobaczyć rzeczywiste efekty jako podobnePrzejdźmy do głównych punktów, zobacz kilka przykładów poniżej i spróbuj zrozumieć rzeczywiste koncepcje InkWell.
W poniższym przykładzie Materiał jest rodzicem InkWell z onTap, ale nadal nie działa. Spróbuj zrozumieć jego koncepcję. Powinieneś zapewnić margines do kontenera lub innego widżetu, aby pokazać efekty. Właściwie poniższy kod działa dobrze, ale nie możemy go zobaczyć, ponieważ nie dostarczyliśmy żadnego marginesu ani wyrównania, więc nie ma miejsca na pokazanie efektów.
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, ), ), ), ); }
Poniższy przykład pokazuje efekty InkWell tylko do góry, ponieważ zapewniamy spację {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, ), ), ), ); }
Poniżej exp. pokaż efekty na całej stronie, ponieważ środek tworzy marginesy z każdej strony. Wyśrodkuj swój widżet podrzędny z góry, z lewej, z prawej i z dołu.
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, ), ), ), ), ); }
źródło
Lepszym sposobem jest użycie
Ink
widżetu zamiast dowolnego innego widżetu.Zamiast definiować
color
wewnątrz kontenera, możesz zdefiniować go wInk
samym widgecie.Poniższy kod zadziała.
Ink( color: Colors.orange, child: InkWell( child: Container( width: 100, height: 100, ), onTap: () {}, ), )
źródło
Znalazłem dla siebie to rozwiązanie. Myślę, że to może ci pomóc:
Material( color: Theme.of(context).primaryColor, child: InkWell( splashColor: Theme.of(context).primaryColorLight, child: Container( height: 100, ), onTap: () {}, ), )
Color
jest przekazywany do widżetu Materiał. Jest to domyślny kolor Twojego widżetu. Możesz dostosować kolor efektu tętnienia za pomocąsplashColor
właściwości Inkwell.źródło
To najlepszy sposób, jaki znalazłem i używam go zawsze. Możesz tego spróbować.
Widget
zInkWell
InkWell
pomocąMaterial
W każdym razie ustaw krycie na 0%. na przykład:
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");}, ), )
źródło
Napotkałem ten sam problem, próbując utworzyć naprzemienny kolor InkWell w ListView. W tym konkretnym przypadku istnieje proste rozwiązanie: zawiń zamienniki w pojemniku, który używa przeważnie przezroczystej zmiany odcienia / jasności - animacja dotykowa InkWell będzie nadal widoczna pod nim. Nie potrzeba żadnego materiału. Zwróć uwagę, że podczas próby obejścia tego problemu za pomocą Materal występują inne problemy - np. Zastąpi on DefaultTextStyle, którego używasz, domyślnym (instaluje AnimatedDefaultTextStyle), co jest ogromnym problemem.
źródło
To działa dla mnie:
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'); }, ));
Po wypróbowaniu wielu odpowiedzi tutaj, była to kombinacja:
splashColor
InkWell
wMaterial(color: Colors.white.withOpacity(0.0), ..)
Dzięki odpowiedziom tutaj, które dają te 2 punkty
źródło
Po dodaniu
onTap:(){}
słuchacza efekt ripple powinien działać dobrze. Nie działa, jeśli używaszBoxShadow()
wInkWell()
widgecie.źródło
Uderzył mnie podobny problem podczas dodawania Inkwell do istniejącego złożonego Widgetu z Pojemnikiem owijającym BoxDecoration kolorem. Dodając materiał i kałamarz w sposób sugerowany, kałamarz wciąż był zasłonięty dekoracją pudełka, więc po prostu sprawiłem, że kolor BoxDecoration był nieco nieprzejrzysty, co pozwoliło zobaczyć kałamarz
źródło
Rozwiązanie dla okrągłych widżetów wykonaj jak poniżej:
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: () {}), ], ), ), )
źródło
Dla mnie to był kolejny problem. InkWell nie pokazywał efektu tętnienia, gdy jako parametr mojego widżetu zdefiniowano poniżej funkcję onTap.
Function(Result) onTapItem; ... onTap: onTapItem(result),
Nie wiem jaka jest różnica, ale następny kod działa dobrze.
źródło