Flutter中Cupertino导航栏Leading图标不显示问题求助

Hey there! Let's figure out why your leading icon isn't showing up in the CupertinoSliverNavigationBar—even though your code looks almost identical to the trailing one, there are a couple of things we can check and fix.

First, let's address the ObstructingPreferredSizeWidget implementation in your Heading class. Right now, you're throwing UnimplementedError for both preferredSize and shouldFullyObstruct, which can cause layout inconsistencies that might be preventing your leading icon from rendering properly. Let's fix those methods with valid implementations:

class Heading extends StatelessWidget with ObstructingPreferredSizeWidget {
  final String headingTitle;
  final Icon leadingIcon;
  final Icon trailingIcon;

  Heading({
    @required this.headingTitle,
    @required this.leadingIcon,
    @required this.trailingIcon
  });

  @override
  Widget build(BuildContext context) {
    return CupertinoSliverNavigationBar(
      largeTitle: Text(headingTitle),
      leading: this.leadingIcon,
      trailing: this.trailingIcon,
    );
  }

  @override
  Size get preferredSize => const Size.fromHeight(kToolbarHeight); // Use standard toolbar height

  @override
  bool shouldFullyObstruct(BuildContext context) {
    return true; // Set to true if you want the bar to fully block content underneath, adjust as needed
  }
}

Next, another thing to note: when using CupertinoSliverNavigationBar as the header for your root page (the first page in your navigation stack), the leading area might behave differently than expected. Sometimes the Cupertino framework hides custom leading widgets on the root page by default. To work around this, you can wrap your leading icon in a GestureDetector (or just a Container if you don't need tap functionality) to ensure it's rendered explicitly:

// In your Heading's build method
leading: GestureDetector(
  onTap: () {
    // Add your menu toggle logic here if needed
  },
  child: Padding(
    padding: const EdgeInsets.all(8.0),
    child: leadingIcon,
  ),
),

Also, double-check that your leading icon's color contrasts with the navigation bar background. Since your trailing icon is showing up, this is probably not the issue, but it's worth a quick check—you can explicitly set the color in the Icon widget if needed:

// In home.dart when passing leadingIcon
leadingIcon: Icon(CupertinoIcons.bars, color: CupertinoColors.activeBlue),

Give these changes a try—fixing the ObstructingPreferredSizeWidget methods should resolve any layout-related issues, and wrapping the leading icon ensures it's displayed even on the root page.

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