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

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

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

Answer 2

现在在

CupertinoNavigationBar

中，当我们在 Bar 上给出 Back 操作时，我们还必须为其提供操作。 这是我的工作片段。

你可以看到我们必须提供可点击的IconButton。

return CupertinoPageScaffold(
  navigationBar: CupertinoNavigationBar(
    leading: Row(
      mainAxisAlignment: MainAxisAlignment.start,
      children: [
        IconButton(
          icon: Icon(CupertinoIcons.chevron_back),
          color: theme.colorScheme.onPrimary,
          onPressed: () {
            Navigator.pop(context);
          },
        )
      ],
    ),
    middle: Text(
      'Second Route',
      style: textStyle,
    ),
    backgroundColor: theme.colorScheme.primary,
  ),
  child: Center(
    child: CupertinoButton(
      onPressed: () {
        Navigator.pop(context);
      },
      child: const Text('Go back!'),
    ),
  ),
);