AppBar
フラッターの高さを簡単に設定するにはどうすればよいですか?
バーのタイトルは、垂直方向の中央に配置する必要があります(その中でAppBar
)。
回答:
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: // ...
)
);
}
}
centerTitle
プロパティを使用して中央に配置できます。
AppBar
あなたはPreferredSize
それのflexibleSpace
ために使うことができます:
appBar: PreferredSize(
preferredSize: Size.fromHeight(100.0),
child: AppBar(
automaticallyImplyLeading: false, // hides leading widget
flexibleSpace: SomeWidget(),
)
),
このようelevation
にAppBar
して、影を表示し続けるためのを維持し、カスタムの高さを設定できます。これは私が探していたものです。SomeWidget
ただし、間隔をで設定する必要があります。
これを書いている時点では、私は気づいていませんでした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),
),
),
);
}
}
@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
),
);
}
標準の代わりに使用します
シンの答えは素晴らしいですが、それには1つ問題があります。
PreferredSize
ウィジェットには、ステータスバーの会計処理せずに、画面の上部にすぐに開始されますので、その高さの一部には、ステータスバーの高さの陰になります。これはサイドノッチも説明します。
解決策:preferredSize
の子をSafeArea
appBar: PreferredSize(
//Here is the preferred height.
preferredSize: Size.fromHeight(50.0),
child: SafeArea(
child: AppBar(
flexibleSpace: ...
),
),
),
のflexibleSpaceプロパティを使用したくない場合は、他のプロパティがAppBar
ステータスバーを自動的に説明するため、その必要はありません。
SafeArea
、ステータスバーの高さを減らすことですが、それでもあなたはそれをMediaQuery.of(context).padding.top
?ここではSafeAreaは必要ないと思います。
SafeArea
がステータスバーと重ならないようにするために重要ですが、MediaQuery.of(context).padding.top
実際には必要ありません。答えを編集しました、ありがとう。
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)),
高さの違い!
AppBar
設定するのではなく、高さを取得することです。