如何在 Flutter 中修復 Appbar 左側的項目，同時將標題保持在 Appbar 的中心？

Question

我想把“Logo2”小部件放在左邊，而“Title logo”放在中間。 我正在嘗試使用 Expanded inside Row 和 Stack，但我無法當場得到它。 我還需要它在不同的屏幕尺寸上工作。

當前代碼：

appBar: AppBar(
  leading: Icon(Icons.menu),
  centerTitle: true,
  title: Container(child: Row(
    children: <Widget>[
      Expanded(flex:2, child: Text("Logo 2")),
      Expanded(flex:4, child: Text("Title logo")),
    ],
  )),
  actions: <Widget>[
    IconButton(
      icon: Icon(Icons.person_pin),
      onPressed: (){},
    )
  ],
),

Answer 1

您可以直接傳遞Row小部件並將Logo 2的flex屬性設置為 1 而不是 2，而不是用Container包裝Row小部件還包含一個名為AppBar的titleSpacing ，如果設置為 0，則有助於保持標題centered 。 下面的工作代碼：

appBar: AppBar(
          titleSpacing: 0,
          leading: Icon(Icons.menu),
          centerTitle: true,
          title: Row(
            mainAxisAlignment: MainAxisAlignment.start,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: <Widget>[
              Expanded(
                flex: 1,
                child: Text('Logo 2'),
              ),
              Expanded(
                flex: 2,
                child: Text('Title Logo')
              )
            ],
          ),
          actions: <Widget>[
            IconButton(
              icon: Icon(Icons.person_pin),
              onPressed: (){},
            )
          ],
        ),

希望這能回答你的問題。