플라우터럭: 카드를 클릭할 수 있게 만드는 방법은 무엇입니까?

플라우터럭: 카드를 클릭할 수 있게 만드는 방법은 무엇입니까?

저는 카드와 같은 간단한 카드를 가지고 있으며 카드에 대한 방법이 없다는 것을 제외하고는 아무 곳이나 클릭하여 어떤 기능을 실행할 수 있기를 원합니다. 하단에 버튼을 추가할 수는 있지만, 이 상황에는 적합하지 않습니다.

카드 전체를 클릭할 수 있게 만드는 방법 아는 사람?

---

특성 위에 구성을 사용합니다. 원하는 위젯을 클릭 가능한 위젯으로 감싸서 원하는 위젯을 수행할 수 있습니다.

일부 클릭 가능한 위젯: , , .

GestureDetector(
  onTap: () => ......,
  child: Card(...),
);

---

Widget 안에 카드를 감는 것 외에도 사용할 수 있다고 생각합니다

InkWell(
  onTap: (){ print("Card Clicked"); }
  child: new Card(),
);

---

Float는 위젯을 제공합니다. 콜백을 등록하여 사용자가 카드를 클릭할 때 발생하는 작업(Tap in Float이라고 함)을 결정할 수 있습니다. 또한 재료 설계 파급 효과 구현

Card(
  child: new InkWell(
    onTap: () {
      print("tapped");
    },
    child: Container(
      width: 100.0,
      height: 100.0,
    ),
  ),
),

---

Inkwell을 사용하고 사용자가 클릭할 때 선택한 색상으로 리바운드 효과를 생성하는 splashColor를 카드에 삽입할 수 있습니다.. 이것은 주로 재료 설계에 사용된다.

return Card(
  color: item.completed ? Colors.white70 : Colors.white,
  elevation: 8,
  child: InkWell(
      splashColor: "Insert color when user tap on card",
      onTap: () async {

      },
    ),
);

---

가장 선호되는 방법은 자식으로 추가하는 것입니다. 방법을 포함하고 있을 뿐만 아니라 카드를 흥미롭게 만드는 데에도 도움이 됩니다.

Card(
  child: ListTile(
    title: Text('Title')
    leading: CircleAvatar(
      backgroundImage: AssetImage('assets/images/test.jpg'),
    ),
    onTap: () {
      print('Card Clicked');
    },
  ),
),

---

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

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

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

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

차이

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

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

---

텍스트 단추에 카드를 삽입할 수도 있습니다:

TextButton clickableCard = TextButton(child: card, onPressed: onCardClick, style: [...]);

이것은 일부 기능을 무료로 얻을 수 있는 이점을 제공합니다. 예를 들어 Floating Web에서는 마우스 오버 효과가 나타나고 커서가 손으로 바뀌므로 사용자는 해당 사용자가 해당 위치를 클릭할 수 있습니다. 다른 추가 기능은 스타일을 사용하여 사용자 지정할 수 있습니다.

---

Flooth에서 'child'를 탭/클릭하여 무언가를 수행합니다

코드:-코드는 다음과 같습니다:

child: Card(------
------------
--------),

:- 마우스 커서를 위에 놓고 (창에서)-를 누릅니다.

:- 기본 위젯을 로 변경합니다.

최종 코드:-

child: GestureDetector(
onTap: YourOnClickCode(),
child: Card(------
------------
--------),
),

---

아래와 같이 제스처 탐지기 위젯에서 카드를 감습니다:

 GestureDetector(
    onTap: () {
      // To do
    },
    child: Card(
     
    ),
  ),

다른 방법은 다음과 같습니다:

InkWell(
    onTap: () {
      // To do
    },
    child: Card(),
  ),

---

대부분의 답변은 훌륭하지만 카드 탭이나 리스트 타일에 리플 효과를 내고/보여주고 싶은 사람을 위해 내 것을 공유하고 싶다.

Card(
  child: TextButton(
    onPressed: ()=> ...,
    child: ListTile(
           title: Text('title'),
  ),
  ),
);

---

를 클릭하는 동안 더 나은 UX를 원한다면 의 자식으로 추가하는 것을 제안한다. 이렇게 하면 클릭 시 실제 재료 3 효과를 얻을 수 있습니다. 아래 코드 스니펫을 사용하면 다음과 같은 작업이 가능합니다:

return Card(
  child: InkWell(
    borderRadius: BorderRadius.circular(12.0),
    onTap: () {},
    child: Column(
      children: [
        Text(
          'This is a Clickable Card!',
          style: TextStyle(fontSize: 20.0),
          ),
        Text('Try This Out!'),
      ],
    ),
  ),
);

null이 아닌 한((){}만 있으면 null이 아닐 수 있습니다), 원하는 스플래시 효과를 얻을 수 있으며 클릭할 수 있습니다. 또한 Flutter 3.7.10의 현재 위젯은 와 함께 제공됩니다. 따라서 더 나은 UX를 위해 동일한 속성을 에 추가해야 합니다.