Flutter 設置 AppBar 的最大寬度

Question

我想像這樣設置 AppBar 的最大寬度：

PreferredSize(
  preferredSize: Size(500, 200),
  child: AppBar(
    flexibleSpace: _AppHeader(),
  ),
)

但這只會設置高度。 如何設置寬度？

Answer 1

要獲得全寬，請使用此

var width =  MediaQuery.of(context).size.width

要獲得全高，請使用此

var height=  MediaQuery.of(context).size.height

Answer 2

看起來這是一個懸而未決的問題（ https://github.com/flutter/flutter/issues/54784 ）。

正如@imeDevelopers 所建議的那樣，您可以使用Stack來“破解”具有最大寬度的AppBar ：

如果您使用Stack ，您還可以決定AppBar是否會隨內容滾動。

使用此代碼即使在滾動時也能將AppBar保持在原位（默認AppBar行為）：

const double appBarWidth = 980;

Scaffold(
  body: Stack(
    children: [
      ListView(
        shrinkWrap: true,
        children: [
          Padding(
            padding: const EdgeInsets.only(top: 56),
            child: Column(
              children: [
                ...[Colors.green, Colors.indigo, Colors.amber].map(
                  (c) => Container(
                    color: Colors.red,
                    child: Center(
                      child: Container(
                        height: 1000,
                        width: appBarWidth,
                        color: c,
                      ),
                    ),
                  ),
                )
              ],
            ),
          ),
        ],
      ),
      Container(
        width: double.infinity,
        height: 56,
        color: Colors.lime,
      ),
      Positioned(
        left: (MediaQuery.of(context).size.width - appBarWidth) / 2,
        child: Container(
          width: appBarWidth,
          child: AppBar(
            elevation: 0,
            title: const Text('TITLE'),
            actions: [
              ...[1, 2, 3].map(
                (i) => TextButton(
                  style: TextButton.styleFrom(
                      primary: Theme.of(context).colorScheme.onPrimary),
                  onPressed: () {},
                  child: Text('ACTION $i'),
                ),
              ),
            ],
          ),
        ),
      )
    ],
  ),
);

如果您希望AppBar隨內容滾動，請使用以下代碼：

const double appBarWidth = 980;

Scaffold(
  body: ListView(
    shrinkWrap: true,
    children: [
      Stack(
        children: [
          Container(
            width: double.infinity,
            height: 56,
            color: Colors.lime,
          ),
          Positioned(
            left: (MediaQuery.of(context).size.width - appBarWidth) / 2,
            child: Container(
              width: appBarWidth,
              child: AppBar(
                elevation: 0,
                title: const Text('TITLE'),
                actions: [
                  ...[1, 2, 3].map(
                    (i) => TextButton(
                      style: TextButton.styleFrom(
                          primary: Theme.of(context).colorScheme.onPrimary),
                      onPressed: () {},
                      child: Text('ACTION $i'),
                    ),
                  ),
                ],
              ),
            ),
          )
        ],
      ),
      Column(
        children: [
          ...[Colors.green, Colors.indigo, Colors.amber].map(
            (c) => Container(
              color: Colors.red,
              child: Center(
                child: Container(
                  height: 1000,
                  width: appBarWidth,
                  color: c,
                ),
              ),
            ),
          )
        ],
      ),
    ],
  ),
);