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

Question

如何在 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,
            ),
          ],
        ),
      ),
    ),
  ),

提前致谢！

Answer 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'),
    );

Answer 2

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

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