InkWell이 파급 효과를 나타내지 않음


94

컨테이너를 탭하면 onTap()핸들러가 트리거 되지만 잉크 스플래시 효과는 표시되지 않습니다.

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내부도 넣어 보았지만 Container헛되이.

답변:


151

용기에 색을 더하는 것이 잉크 효과를 덮는 것 같아요

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

이 코드는 작동하는 것 같습니다

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

가운데 사각형을 클릭하세요.

편집 : 버그 보고서를 찾았습니다. https://github.com/flutter/flutter/issues/3782

이것은 실제로 예상 한 것과 같지만 더 명확하게 문서를 업데이트해야합니다.

무슨 일이 일어나고 있는지는 머티리얼 스펙에 스플래시가 실제로 머티리얼에 잉크라고되어 있다는 것입니다. 그래서 우리가 스플래시 할 때 우리가하는 것은 말 그대로 머티리얼 위젯이 스플래시를하는 것입니다. 머티리얼 위에 무언가가 있으면 그 아래로 튀어 나와 볼 수 없습니다.

개념적으로 이미지를 머티리얼에 인쇄하는 "MaterialImage"위젯을 추가하여 스플래시가 이미지 위에 표시되도록했습니다. 데코레이션과 비슷한 것을하는 MaterialDecoration을 가질 수 있습니다. 또는 머티리얼 자체에 장식을 적용 할 수 있습니다. 지금은 색상이 필요하지만 전체 장식으로 확장 할 수 있습니다. 그래도 그래디언트가있는 머티리얼을 사용하는 것이 실제로 머티리얼 사양과 호환되는지 여부는 명확하지 않으므로 그렇게해야할지 확실하지 않습니다.

단기적으로 해결 방법이 필요한 경우 재료를 "투명도"유형을 사용하도록 설정 한 상태로 용기 위에 재료를 놓은 다음 그 안에 잉크를 잘 넣을 수 있습니다.

--hixie

업데이트 : Hixie는 작년에 새로운 잉크 솔루션을 병합했습니다. 잉크는 이미지 위에 튀는 편리한 방법을 제공합니다.

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

참고 : 새 잉크 위젯을 테스트하지 않았습니다. ink_paint_test.dart 및 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


2
색상은 Material그대로두고 Container.
Herohtar 2019

1
CopsOnRoad가 답변을 올렸을 때 조금 생각했습니다.
user1462442

1
@KoenVanLooveren CopsOnRoad 답변을 시도하십시오. CopsOnRoad의 솔루션은 매우 우아 때문에 나는 내 솔루션을 편집하지 않았다
user1462442은

그게 내가 몇 가지 리팩토링 후 사용할 것입니다 : D 덕분에
코엔 반 Looveren

내 경우는, 솔루션 FO 감사 컨테이너 모양이었다
모하마드 Ersan

106

산출:

여기에 이미지 설명 입력


간단하게 사용하십시오 Ink위젯에 싸여 InkWell.

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

소스는 3 단계를 확인합니다. github.com/flutter/flutter/blob/… 각 핸들러에서 콜백이 사용 가능한지 확인합니다. 그렇지 않으면 아무 일도 일어나지 않습니다.
Nightking

@CopsOnRoad, 여기에 flutter 관련 질문이 있으 시겠습니까? stackoverflow.com/questions/60539378/…
Istiaque Ahmed

전체 코드가 당신이 준 예제를 의미한다면 그렇습니다. 나는 이것이 해결책이라는 것을 발견했다> stackoverflow.com/a/58556613/12140067
Chris

@Chris 이 코드는 하루 종일 작동하기 때문에 Theme'또는 Material'간섭 이있을 수 있습니다 .
CopsOnRoad

1
이것이 나를 위해 일한 유일한 솔루션입니다
easazade

24

InkWell ()은 추가 할 때까지 파급 효과를 표시하지 않습니다.

onTap : () {} 

또는 onDoubleTap, onLongPress 등과 같은 콜백 중 하나입니다.

이 매개 변수를 지정할 때만 탭을 듣기 시작하므로 InkWell 내부의 매개 변수.


네, 그랬습니다. 소스 확인 : github.com/flutter/flutter/blob/… 각 핸들러에서 콜백이 사용 가능한지 확인합니다. 그렇지 않으면 아무 일도 일어나지 않습니다.
Nightking

17
  1. InkWell 위젯에는 조상으로 Material 위젯이 있어야합니다. 그렇지 않으면 효과를 표시 할 수 없습니다. 예 :

    Material(
      child : InkWell(
        child : .....
    
  2. onTap실제 효과를 확인하려면 방법 을 추가해야합니다.

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

요점으로 와서 아래의 몇 가지 예를보고 InkWell의 실제 개념을 이해해 보겠습니다.

  • 아래 예제에서 Material은 onTap이있는 InkWell의 부모이지만 여전히 작동하지 않습니다. 그것의 개념을 이해하려고 노력하십시오. 효과를 표시하려면 컨테이너 또는 기타 위젯에 약간의 여백을 제공해야합니다. 실제로 아래 코드는 잘 작동하지만 여백이나 정렬을 제공하지 않았기 때문에 효과를 표시 할 공간이 없기 때문에 볼 수 없습니다.

    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,
            ),  
          ),
        ),
      );
    }
    
  • 아래 예는 공간 {margin}을 제공하기 때문에 위쪽으로 만 InkWell 효과를 보여줍니다.

    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 이하. 중앙은 모든면에서 여백을 만들기 때문에 모든 페이지에 효과를 보여줍니다. 위쪽, 왼쪽, 오른쪽 및 아래쪽에서 자식 위젯을 가운데 정렬합니다.

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

9

더 좋은 방법은 Ink다른 위젯 대신 위젯 을 사용하는 것입니다.

color컨테이너 내부 를 정의하는 대신 Ink위젯 자체 에서 정의 할 수 있습니다 .

아래 코드가 작동합니다.

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

를 추가하는 것을 잊지 마십시오 onTap: () {}. InkWell그렇지 않으면 파급 효과도 표시되지 않습니다.


4

이 솔루션을 찾았습니다. 나는 그것이 당신을 도울 수 있다고 생각합니다.

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

ColorMaterial 위젯에 제공됩니다. 위젯의 기본 색상입니다. splashColorInkwell의 속성을 사용하여 물결 효과의 색상을 조정할 수 있습니다 .


3

이것이 제가 항상 찾아서 사용하는 가장 좋은 방법입니다. 시도해 볼 수 있습니다.

  • 당신의 랩 Widget으로InkWell
  • InkWellMaterial
  • 어쨌든 불투명도를 0 %로 설정하십시오. 예 :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");},
      ),
    )
    

2

ListView에서 InkWell의 교대 색상을 만들려고 시도하는 것과 동일한 문제가 발생했습니다. 이 특별한 경우에는 간단한 해결책이 있습니다. 대부분 투명한 색조 / 밝기 변경을 사용하는 컨테이너에 대체 항목을 포장합니다. InkWell 터치 애니메이션은 그 아래에 계속 표시됩니다. 자료가 필요하지 않습니다. Materal을 사용하여이 문제를 해결하려고 할 때 다른 문제가 있다는 점에 유의하십시오.


2

이것은 나를 위해 일하고 있습니다.

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

여기에서 많은 답변을 시도한 후 다음과 같은 조합이 이루어졌습니다.

  1. 환경 splashColor
  2. 포장 InkWellMaterial(color: Colors.white.withOpacity(0.0), ..)

그 두 가지 요점을 만드는 여기 답변 덕분에


1

onTap:(){}리스너 를 추가 하면 잔물결 효과가 제대로 작동합니다. 위젯 BoxShadow()에서와 함께 사용하면 작동하지 않습니다 InkWell().


그게 트릭입니다. Ripple은 onTap () 없이는 작동하지 않습니다. 감사합니다!
Hardik Joshi

0

BoxDecoration을 색상으로 감싸는 컨테이너를 사용하여 기존의 복잡한 위젯에 Inkwell을 추가하는 비슷한 문제가 발생했습니다. Inkwell이 BoxDecoration에 의해 여전히 가려진 방식으로 Material과 Inkwell을 추가하여 BoxDecoration의 색상을 약간 불투명하게하여 Inkwell을 볼 수 있도록했습니다.


0

원형 위젯에 대한 솔루션은 다음과 같습니다.

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

0

나에게는 또 다른 문제였습니다. InkWell은 아래와 같이 정의 된 내 위젯의 매개 변수로 onTap 기능을 가지고있을 때 파급 효과가 나타나지 않았습니다.

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

차이점이 무엇인지 모르겠지만 다음 코드는 잘 작동합니다.

onTap: (){ onTapItem(result); },
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.