如何在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);
}