如何在自定义导航抽屉列表项中实现ontap()函数

问题描述 投票:0回答:2

试图在Flutter中创建自定义Navigation Drawer时,我正在寻找如何在列表项上实现onTap()方法。我认为我应该能够定义该函数并将其作为参数传递给_buildRow(Icons.person_pin,“ Profile”)。请检查下面的代码以了解我的实际意思

我只是想在单击列表菜单时响应单击/点击事件。在默认导航抽屉中,ListTile小部件中的is onTap属性。那是

ListTile(
                  title: Text("Home"),
                  onTap: () {
                    Navigator.of(context).pop();
                  }

这是我的代码段

导入'package:flutter / material.dart';

导入'package:payload / src / oval-right-clipper.dart';

class AppEntryHomeAuthenticated extends StatelessWidget {
  final GlobalKey<ScaffoldState> _key = GlobalKey<ScaffoldState>();
  final Color primary = Colors.white;
  final Color active = Colors.grey.shade800;
  final Color divider = Colors.grey.shade600;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      key: _key,
      appBar: AppBar(
        elevation: 50.0,
        backgroundColor: Colors.white,
        centerTitle: true,
        title: Text('PayLoad', style: TextStyle(color: Colors.black)),
        actions: <Widget>[
          Icon(Icons.settings),
        ],
        automaticallyImplyLeading: false,
        leading: IconButton(
          icon: Icon(Icons.menu),
          onPressed: () {
            _key.currentState.openDrawer();
          },
        ),
      ),
      drawer: _buildDrawer(),
      body: SingleChildScrollView(),
    );
  }

  _buildDrawer() {
    return ClipPath(
      clipper: OvalRightBorderClipper(),
      child: Drawer(
        child: Container(
          padding: const EdgeInsets.only(left: 16.0, right: 40),
          decoration: BoxDecoration(
              color: primary, boxShadow: [BoxShadow(color: Colors.black45)]),
          width: 300,
          child: SafeArea(
            child: SingleChildScrollView(
              child: Column(
                children: <Widget>[
                  Container(
                    alignment: Alignment.centerRight,
                    child: IconButton(
                      icon: Icon(
                        Icons.power_settings_new,
                        color: active,
                      ),
                      onPressed: () {},
                    ),
                  ),
                  Container(
                    height: 90,
                    alignment: Alignment.center,
                    decoration: BoxDecoration(
                        shape: BoxShape.circle,
                        gradient: LinearGradient(
                            colors: [Colors.white10, Colors.white10])),
                    child: CircleAvatar(
                      child: Image.asset(
                        "assets/images/logo.png",
                        fit: BoxFit.contain,
                      ),
                      radius: 40,
                    ),
                  ),
                  SizedBox(height: 5.0),
                  Text(
                    "PayLoad Mobile",
                    //"PayLoad Wallet",
                    style: TextStyle(
                        color: active,
                        fontSize: 18.0,
                        fontWeight: FontWeight.w600),
                  ),
                  //  Text(
                  //    "@ray",
                  //    style: TextStyle(color: active, fontSize: 16.0),
                  //  ),
                  SizedBox(height: 30.0),
                  _buildRow(Icons.home, "Home",),
                  _buildDivider(),
                  _buildRow(Icons.person_pin, "Profile"),
                  _buildDivider(),
                  _buildRow(Icons.save, "Saving Targets", showBadge: true),
                  _buildDivider(),
                  _buildRow(Icons.notifications, "Notifications",
                      showBadge: false),
                  _buildDivider(),
                  _buildRow(Icons.settings, "Settings"),
                  _buildDivider(),
                  _buildRow(Icons.question_answer, "Feedback"),
                  _buildDivider(),
                  _buildRow(Icons.info_outline, "Help"),
                  _buildDivider(),
                  _buildRow(Icons.share, "Share"),
                  _buildDivider(),
                ],
              ),
            ),
          ),
        ),
      ),
    );
  }

  Divider _buildDivider() {
    return Divider(
      color: divider,
    );
  }

  Widget _buildRow(IconData icon, String title, {bool showBadge = false}) {
    final TextStyle tStyle = TextStyle(color: active, fontSize: 16.0);
    return Container(
      padding: const EdgeInsets.symmetric(vertical: 5.0),
      child: Row(children: [
        Icon(
          icon,
          color: active,
        ),
        SizedBox(width: 10.0),
        Text(
          title,
          style: tStyle,
        ),
        Spacer(),
        if (showBadge)
          Material(
            color: Colors.deepOrange,
            elevation: 5.0,
            shadowColor: Colors.red,
            borderRadius: BorderRadius.circular(5.0),
            child: Container(
              width: 25,
              height: 25,
              alignment: Alignment.center,
              decoration: BoxDecoration(
                color: Colors.deepOrange,
                borderRadius: BorderRadius.circular(5.0),
              ),
              child: Text(
                "beta",
                style: TextStyle(
                    color: Colors.white,
                    fontSize: 12.0,
                    fontWeight: FontWeight.bold),
              ),
            ),
          )
      ]),
    );
  }
}
flutter navigation-drawer flutter-layout
2个回答
0
投票

如果我正确理解了您的问题,则可以用GestureDetector包装商品并使用其onTap方法:

GestureDetector(
  onTap: () => myMethod(),
  child: Container(
    ...
  ),
),

0
投票

效果很好。我只需要将每个列表包装在Inkwell中

© www.soinside.com 2019 - 2024. All rights reserved.