Flutter新手求助：如何为_accountWidget添加点击导航功能

Hey there! Let's get that navigation working for your _accountWidget list items. The issue right now is that your list item container doesn't have a proper tap handler attached—plus, press: isn't the correct property for Flutter tap events. Here's how to fix it step by step:

The Problem Breakdown #

Your current list item is just a static Container with no way to detect taps. Flutter uses onTap (not press) for click events, and you'll need to wrap your item in a widget that can detect gestures—InkWell is perfect here because it also adds a nice Material-style ripple effect when tapped.

Modified Code for _accountWidget #

Here's the updated version of your itemBuilder with working navigation:

Widget _accountWidget() {
  return Container(
    child: Column(
      mainAxisSize: MainAxisSize.min,
      children: <Widget>[
        ListView.builder(
          itemCount: accounts.length,
          padding: EdgeInsets.only(left: 16, right: 16, top: 18, bottom: 29),
          itemBuilder: (context, index) {
            // Wrap your container with InkWell to add tap functionality
            return InkWell(
              onTap: () { // Use onTap instead of press
                Navigator.push(
                  context,
                  MaterialPageRoute(
                    builder: (context) {
                      return HomePage();
                    },
                  ),
                );
              },
              child: Container(
                height: 76,
                margin: EdgeInsets.only(bottom: 13),
                padding: EdgeInsets.only(left: 24, top: 12, bottom: 12, right: 22),
                decoration: BoxDecoration(
                  color: kWhiteColor,
                  borderRadius: BorderRadius.circular(15),
                  boxShadow: [
                    BoxShadow(
                      color: kTenBlackColor,
                      blurRadius: 10,
                      spreadRadius: 5,
                      offset: Offset(8.0, 8.0),
                    )
                  ],
                ),
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: <Widget>[
                    Row(
                      children: <Widget>[
                        Container(
                          height: 57,
                          width: 57,
                          decoration: BoxDecoration(
                            shape: BoxShape.circle,
                            image: DecorationImage(
                              image: AssetImage(accounts[index].photo),
                            ),
                          ),
                        ),
                        SizedBox(
                          width: 13,
                        ),
                        Column(
                          crossAxisAlignment: CrossAxisAlignment.start,
                          mainAxisAlignment: MainAxisAlignment.center,
                          children: <Widget>[
                            Container(
                              padding: new EdgeInsets.only(top:15.0),
                              child: Center(
                                child: Text(
                                  accounts[index].name,
                                  style: GoogleFonts.inter(
                                      fontSize: 16,
                                      fontWeight: FontWeight.w700,
                                      color: kBlackColor),
                                ),
                              ),
                            ),
                            Text(
                              accounts[index].version,
                              style: GoogleFonts.inter(
                                  fontSize: 14,
                                  fontWeight: FontWeight.w400,
                                  color: kGreyColor),
                            )
                          ],
                        )
                      ],
                    ),
                  ],
                ),
              ),
            );
          },
          shrinkWrap: true,
          controller: ScrollController(keepScrollOffset: false),
        )
      ],
    ),
  );
}

Key Changes Explained #

1. Added InkWell Wrapper: This widget detects tap gestures and provides visual feedback (the ripple effect) which is standard for Material Design.
2. Replaced press: with onTap:: onTap is the correct callback property for tap events in Flutter gesture widgets.
3. Kept Your Navigation Logic: The Navigator.push code you wrote is correct—we just moved it into the proper onTap callback.

Quick Checks to Ensure It Works #

• Make sure HomePage is properly imported at the top of your Account.dart file (e.g., import 'path/to/home_page.dart';).
• Verify that your Account widget is part of a widget tree that includes a MaterialApp (since Navigator relies on the Material context).

That should do it! Tap any of your account list items now, and you'll be navigated to HomePage as expected.

内容的提问来源于stack exchange，提问作者core114