Flutter：带有前导图标和标题的 CupertinoNavigationBar

Posted 2023-02-23

【中文标题】Flutter：带有前导图标和标题的 CupertinoNavigationBar

【英文标题】：Flutter: CupertinoNavigationBar with leading icon and title

【发布时间】：2020-01-24 17:00:14

【问题描述】：

如何在 Flutter 中创建导航栏的前导项，带有返回图标和前一个脚手架的标题。看图：

我尝试将 Text 小部件放入 Row 中，但出现溢出。

CupertinoNavigationBar(
    middle: Text('New report'),
    leading: Align(
      alignment: Alignment(-1.5, -1),
      child: IconButton(
        onPressed: () 
          Navigator.pop(context);
        ,
        icon: Row(
          mainAxisAlignment: MainAxisAlignment.start,
          children: <Widget>[
            Icon(
              CupertinoIcons.left_chevron,
              color: CupertinoColors.destructiveRed,
            ),
          ],
        ),
      ),
    ),
  ),

提前致谢！

【参考方案1】：

最简单的解决方法是用Row 包裹您的前导小部件，然后通过单击 再次将其包裹到GestureDetector

  CupertinoNavigationBar(
      leading: GestureDetector(
        onTap: () => Navigator.pop(context),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.start,
          children: <Widget>[
            Icon(
              CupertinoIcons.left_chevron,
              color: CupertinoColors.destructiveRed,
            ),
            Text('Reports', style: TextStyle(color: CupertinoColors.destructiveRed),)
          ],
        ),
      ),
      middle: Text('Time report'),
    );

【参考方案2】：

您的前导可能是包含图标和文本的行：类似这样的：

CupertinoNavigationBar(
    middle: Text('New report'),
    leading: Row(
          mainAxisAlignment: MainAxisAlignment.start,
          children: <Widget>[
            Icon(
              CupertinoIcons.left_chevron,
              color: CupertinoColors.destructiveRed,
            ),
             Text('Reports')
             ],
        ),
    ),
  ),

【讨论】：

您是否阅读了我关于行内文本小部件的评论？这种方法行不通

我在发帖之前测试了我的 sn-p，它完全符合您的预期。你应该对试图帮助你的人更有礼貌