dart - 如何在 ListTile 中添加 AlertDialog

Question

我想在每次点击 ListTile 时显示一个 AlertDialog。我想在 ListTile 的 OnTap 函数中添加 AlertDialog，如代码所示。

    import "package:flutter/material.dart";

void main() {
  runApp(MaterialApp(
    debugShowCheckedModeBanner: false,
    title: 'Exploring Ui Widgets',
    home: Scaffold(
      body: getListView(),
    ),
  ));
}

Widget getListView() {
  var listview = ListView(
    children: <Widget>[
      ListTile(
        leading: Icon(Icons.accessible),
        title: Text('Get Up!'),
        subtitle: Text('Use your Legs!'),
        trailing: Icon(Icons.accessible_forward),
        onTap: () {
          // I want to add a AlertDialog here!
        },
      ),
      ListTile(
        leading: Icon(Icons.airline_seat_individual_suite),
        title: Text('Wake Up!'),
        subtitle: Text('Dont Sleep!'),
        trailing: Icon(Icons.airline_seat_flat_angled),
      )
    ],
  );
  return listview;
   }

Answer 1

你可以这样做:

onTap: () => alertDialog(context),

然后声明这个方法:

void alertDialog(BuildContext context) {
  var alert = AlertDialog(
    title: Text("My title"),
    content: Text("Dialog description"),
  );
 showDialog(context: context, builder: (BuildContext context) => alert);
}

在你的代码中它看起来像这样:

import "package:flutter/material.dart";

void main() {
  runApp(MaterialApp(
    debugShowCheckedModeBanner: false,
    title: 'Exploring Ui Widgets',
    home: Scaffold(
      body: getListView(),
    ),
  ));
}

Widget getListView() {
  var listview = ListView(
    children: <Widget>[
      ListTile(
        leading: Icon(Icons.accessible),
        title: Text('Get Up!'),
        subtitle: Text('Use your Legs!'),
        trailing: Icon(Icons.accessible_forward),
        onTap: () {
          onTap: () => alertDialog(context),
        },
      ),
      ListTile(
        leading: Icon(Icons.airline_seat_individual_suite),
        title: Text('Wake Up!'),
        subtitle: Text('Dont Sleep!'),
        trailing: Icon(Icons.airline_seat_flat_angled),
      )
    ],
  );
  return listview;
}

void alertDialog(BuildContext context) {
  var alert = AlertDialog(
    title: Text("Dialog title"),
    content: Text("Dialog description"),
  );
 showDialog(context: context, builder: (BuildContext context) => alert);
}