扩大 CupertinoNavigationBar 前导区域答案

【问题标题】：Expand area of CupertinoNavigationBar leading扩大 CupertinoNavigationBar 前导区域
【发布时间】：2019-11-18 15:26:02
【问题描述】：

我正在使用CupertinoNavigationBar 进行如下图所示的布局

在左侧/leading 区域，我覆盖了默认的后退按钮来创建布局，但我得到了溢出

return CupertinoPageScaffold(
  ...
  leading: Row(
    children: <Widget>[
      UtomoDeckNavigationBar.getDefaultBackButton(context: context, isLightTheme: true),
        Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(widget.chat.name,
              style: TextStyle(
                color: CupertinoColors.black,
                fontWeight: FontWeight.bold,
                fontSize: 14.0)),
            Text('Online',
              style: TextStyle(color: CupertinoColors.black, fontSize: 12.0))
        ],
      )
    ],
  )
)

还有错误

Performing hot reload...
Syncing files to device iPhone SE...
flutter: ══╡ EXCEPTION CAUGHT BY RENDERING LIBRARY ╞═════════════════════════════════════════════════════════
flutter: The following assertion was thrown during layout:
flutter: A RenderFlex overflowed by 34 pixels on the right.
flutter:
flutter: The overflowing RenderFlex has an orientation of Axis.horizontal.
flutter: The edge of the RenderFlex that is overflowing has been marked in the rendering with a yellow and
flutter: black striped pattern. This is usually caused by the contents being too big for the RenderFlex.
flutter: Consider applying a flex factor (e.g. using an Expanded widget) to force the children of the
flutter: RenderFlex to fit within the available space instead of being sized to their natural size.
flutter: This is considered an error condition because it indicates that there is content that cannot be
flutter: seen. If the content is legitimately bigger than the available space, consider clipping it with a
flutter: ClipRect widget before putting it in the flex, or using a scrollable container rather than a Flex,
flutter: like a ListView.
flutter: The specific RenderFlex in question is: RenderFlex#d650f relayoutBoundary=up2 OVERFLOWING:
flutter:   creator: Row ← IconTheme ← Builder ← Padding ← KeyedSubtree-[GlobalKey#fab21 Leading] ←
flutter:     LayoutId-[<_ToolbarSlot.leading>] ← CustomMultiChildLayout ← NavigationToolbar ← Padding ←
flutter:     MediaQuery ← Padding ← SafeArea ← ⋯
flutter:   parentData: offset=Offset(16.0, 0.0) (can use size)
flutter:   constraints: BoxConstraints(0.0<=w<=90.7, h=44.0)
flutter:   size: Size(90.7, 44.0)
flutter:   direction: horizontal
flutter:   mainAxisAlignment: start
flutter:   mainAxisSize: max
flutter:   crossAxisAlignment: center
flutter:   textDirection: ltr
flutter:   verticalDirection: down
flutter: ◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤
flutter: ════════════════════════════════════════════════════════════════════════════════════════════════════
Reloaded 11 of 687 libraries in 407ms.

我可以扩大领先区域的限制吗，或者有更好的方法来做到这一点？

谢谢。

【问题讨论】：

标签： flutter flutter-layout flutter-cupertino

【解决方案1】：

我会告诉你什么对我有用。首先，您应该将 Container 包装在 Flexible 中，让您的 Column 知道 Container 可以比其固有宽度窄。二、为...三点添加溢出：TextOverflow.ellipsis。

【讨论】：

请仔细阅读问题，验证前不要回答。

【解决方案2】：

为了解决这个问题，我在middle 中使用Row 和MainAxisAlignment.start 而不是leading。

编辑：

将Container 与无穷大width 一起使用而不是Row，如果其子小部件多于父小部件(Row)，则其子小部件将溢出，而TextOverflow.ellipsis 将无济于事

【讨论】：