Flutter: установка высоты AppBar

105

Как я могу просто установить высоту AppBarво Flutter?

Заголовок панели должен оставаться по центру по вертикали (в этом AppBar).

Бугра Экуклу
источник
@Mans Речь идет о «получении» высоты AppBar, а не о ее «настройке».
Buğra Ekuklu
1
Вы смотрели на это ? Вы также можете создать свой собственный виджет как AppBar и установить его высоту.
Bostrot
@Leviathlon моя плохая. проверьте мой ответ (надеюсь) на лучшую помощь
Ман

Ответы:

196

Вы можете использовать PreferredSize :

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Example',
      home: Scaffold(
        appBar: PreferredSize(
          preferredSize: Size.fromHeight(50.0), // here the desired height
          child: AppBar(
            // ...
          )
        ),
        body: // ...
      )
    );
  }
}
Cinn
источник
5
Это увеличивает размер AppBar, но не центрирует текст.
Дункан Джонс
5
Вы можете использовать centerTitleсвойство, чтобы центрировать его.
CopsOnRoad
11
@CopsOnRoad Это центрирует его по горизонтали, но не центрирует по вертикали.
Giraldi
1
@Giraldi Вы не можете этого сделать, не изменив исходный файл или не создав свой собственныйAppBar
CopsOnRoad
1
@CopsOnRoad Я знаю, но я просто указывал на то, о чем просит OP.
Giraldi
43

Вы можете использовать PreferredSizeи flexibleSpaceдля этого:

appBar: PreferredSize(
  preferredSize: Size.fromHeight(100.0),
  child: AppBar(
    automaticallyImplyLeading: false, // hides leading widget
    flexibleSpace: SomeWidget(),
  )
),

Таким образом, вы можете оставить elevationof, AppBarчтобы тень оставалась видимой, и иметь настраиваемую высоту, что я и искал. Однако вам необходимо установить интервал SomeWidget.

футурист
источник
Это должен быть принятый ответ! Большое спасибо.
Хазааа
14

На момент написания этого я не знал об этом PreferredSize. Ответ Цинна лучше всего подходит для этого.

Вы можете создать свой собственный виджет с произвольной высотой:

import "package:flutter/material.dart";

class Page extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Column(children : <Widget>[new CustomAppBar("Custom App Bar"), new Container()],);
  }
}


class CustomAppBar extends StatelessWidget {

  final String title;
  final double barHeight = 50.0; // change this for different heights 

  CustomAppBar(this.title);

  @override
  Widget build(BuildContext context) {
    final double statusbarHeight = MediaQuery
        .of(context)
        .padding
        .top;

    return new Container(
      padding: new EdgeInsets.only(top: statusbarHeight),
      height: statusbarHeight + barHeight,
      child: new Center(
        child: new Text(
          title,
          style: new TextStyle(fontSize: 20.0, fontWeight: FontWeight.bold),
        ),
      ),
    );
  }
}
Ман
источник
9

В дополнение к ответу @Cinn вы можете определить такой класс

class MyAppBar extends AppBar with PreferredSizeWidget {
  @override
  get preferredSize => Size.fromHeight(50);

  MyAppBar({Key key, Widget title}) : super(
    key: key,
    title: title,
    // maybe other AppBar properties
  );
}

или так

class MyAppBar extends PreferredSize {
  MyAppBar({Key key, Widget title}) : super(
    key: key,
    preferredSize: Size.fromHeight(50),
    child: AppBar(
      title: title,
      // maybe other AppBar properties
    ),
  );
}

а потом использовать вместо стандартного

Павел
источник
4

Ответ Цинна великолепен, но в нем есть одна ошибка.

PreferredSizeВиджет будет немедленно начать в верхней части экрана, без учета строки состояния, так что некоторые из его высоты будут омрачены высотой строки состояния. Это также учитывает боковые выемки.

Решение : оберните preferredSizeребенкаSafeArea

appBar: PreferredSize(
  //Here is the preferred height.
  preferredSize: Size.fromHeight(50.0),
  child: SafeArea(
    child: AppBar(
      flexibleSpace: ...
    ),
  ),
),

Если вы не хотите использовать свойство flexibleSpace, в этом нет необходимости, потому что другие свойства объекта AppBarбудут автоматически учитывать строку состояния.

TN888
источник
но SafeAreaчтобы уменьшить высоту строки состояния, но вы добавили ее снова с помощью MediaQuery.of(context).padding.top? Думаю, SafeArea здесь не нужна.
Райд,
@Ryde SafeAreaВажно, чтобы панель приложения не перекрывалась со строкой состояния, но на MediaQuery.of(context).padding.topсамом деле в этом нет необходимости. Ответ отредактировал, спасибо.
TN888,
-10

Если вы находитесь в Visual Code, Ctrl + щелчок по функции AppBar.

Widget demoPage() {
  AppBar appBar = AppBar(
    title: Text('Demo'),
  );
  return Scaffold(
    appBar: appBar,
    body: /*
    page body
    */,
  );
}

И отредактируйте этот кусок.

app_bar.dart will open and you can find 
    preferredSize = new Size.fromHeight(kToolbarHeight + (bottom?.preferredSize?.height ?? 0.0)),

Разница в росте!

образец изображения

образец изображения

goops17
источник
1
Он не об этом просил. Он хочет, чтобы заголовок располагался вертикально по центру
Реми Русселе
centerTitle: true; можно использовать для этого.
goops17
вертикальный центр, а не горизонтальный
Реми Русселе
Таким образом, он не считывает новую высоту. Я не думаю, что было бы неплохо переделывать исходный файл, например app_bar.dart, для его изменения.
goops17
6
Редактировать исходники фреймворка - очень плохая идея. Если вы обновите фреймворк, это приведет к поломке вашего приложения.
Константин