개발하자

Float - 눌린 상태의 용기?

Cuire 2023. 4. 29. 09:40
반응형

Float - 눌린 상태의 용기?

나는 다음 컨테이너를 가지고 있다:

  new Container(
    width: 500.0,
    padding: new EdgeInsets.fromLTRB(20.0, 40.0, 20.0, 40.0),
    color: Colors.green,
    child: new Column(
      children: [
        new Text("Ableitungen"),
      ]
    ),
  ),

사용자가 를 클릭하면 메서드가 실행되기를 원합니다(예를 들어 사용할 수 있는 방법). 어떻게 하면 이 행동을 달성할 수 있을까요?



다음과 같은 위젯을 사용할 수 있습니다:

new GestureDetector(
        onTap: (){
          print("Container clicked");
        },
        child: new Container(
          width: 500.0,
          padding: new EdgeInsets.fromLTRB(20.0, 40.0, 20.0, 40.0),
          color: Colors.green,
          child: new Column(
              children: [
                new Text("Ableitungen"),
              ]
          ),
        )
    );


가장 간단한 해결책은 에 포장하는 것이지만 재료 설계 앱을 작성하는 경우 또는 를 사용하는 것을 고려해 보십시오. 이러한 위젯을 누르면 시각적인 스플래시 응답이 표시됩니다.



답변에 추가하고 싶었을 뿐입니다(위에서 허용된 답변)

아이콘 및 텍스트 그룹의 클릭을 사용하거나 처리하는 경우 아이콘 버튼의 onPressed 메서드가 GestureDetector/InkWell의 onTap 메서드를 대신하므로 아이콘을 표시하는 대신 위젯을 사용하면 텍스트를 클릭할 때만 onTap이 작동합니다.

예 -

@override
  Widget build(BuildContext context) {
    return Row(mainAxisSize: MainAxisSize.min, children: [
      GestureDetector(
        onTap: () {
          _toggleFavorite();
        },
        child: Row(
          children: [
            Container(
              padding: EdgeInsets.all(0.0),
              child: _isFavorited ? Icon(Icons.star, color: Colors.red[500]) : Icon(Icons.star_border),
            ),
            SizedBox(
              width: 18.0,
              child: Container(
                child: Text('$_favoriteCount'),
              ),
            )
          ],
        ),
      )
    ]);
  }
}


대신 사용하십시오.

InkWell(
  onTap: () {}, // Handle your callback
  child: Ink(height: 100, width: 100, color: Colors.blue),
)

출력:

enter image description here



컨테이너 자체에는 클릭 이벤트가 없으므로 두 가지 방법이 있습니다

  1. 잉크 웰 위젯
  2. 제스처 감지기

Flutter에서 InkWell은 터치 동작에 반응하는 재료 위젯입니다.

InkWell(
    child: Container(......),
    onTap: () { 
        print("Click event on Container"); 
    },
);

제스처 탐지기는 제스처를 탐지하는 위젯입니다.

GestureDetector(
    onTap: () { 
        print("Click event on Container"); 
    },
    child: Container(.......),
)

차이

InkWell은 재료 위젯으로 터치가 수신될 때마다 리플 효과를 표시할 수 있습니다.

제스처 감지기는 터치뿐만 아니라 다른 제스처에도 더 일반적인 용도로 사용됩니다.



표제

대

두 개의 위젯을 사용할 수 있습니다

1) 제스처 감지기

    GestureDetector(

        onTap: (){
          print("Container clicked");
        },
        child: new Container(child: ...)          
    );

이 위젯은 아무런 효과가 없습니다.

2) 잉크 우물

    InkWell(

        child: Container(......),
        onTap: () { 
            print("Click event on Container"); 
        },
    );

이 위젯은 애니메이션 효과가 있습니다.



사용자는 및 를 사용하여 모든 위젯의 단추를 만들 수 있습니다.

InkWell(
    onTap: () { 
        print("Tapped"); 
    },
    child: Container(/* ... */),
);

GestureDetector(
    onTap: () { 
        print("Tapped"); 
    },
    child: Container(/* ... */),
)



InkWell(
    child: Container(/* ... */),
    onTap: () { 
        print("Add your on tap event in this block"); 
    },
);

훌륭한 재료 파급 효과를 제공할 것이기 때문에 사용하십시오.



InkWell(
    child: Container(
    width: 500.0,
    padding: new EdgeInsets.fromLTRB(20.0, 40.0, 20.0, 40.0),
    color: Colors.green,
    child: new Column(
        children: [
            new Text("Ableitungen"),
            ]
        ),
    ),
    onTap: () { 
        print("Tapped on container"); 
    },
);


ontap을 제공하는 데 사용합니다. 위젯으로 마무리:

GestureDetector(
    onTap: () { 
        print("Please tap here."); 
    },
    child: Container(
        width: 500.0,
        padding: new EdgeInsets.fromLTRB(20.0, 40.0, 20.0, 40.0),
        color: Colors.green,
        child: new Column(
          children: [
            new Text("Hello"),
          ]
        ),
    ),
),

반응형