[英]Resize leading widget in flutter AppBar
我正在制作一個高度高於典型 AppBar 的自定義 AppBar。 我也想調整前導小部件/圖標的大小,並利用automaticallyImplyLeading
默認行為(因此菜單圖標和后退圖標會自動實現)。
這是我認為我會實施的解決方案:
class AppAppBar extends PreferredSize{
AppAppBar(String title) : super(
preferredSize: Size.fromHeight(56.0),
child: AppBar(
centerTitle: true,
title: Text(title, style: textStyle)
)) {
(child as AppBar).leading =
SizedBox(width: 30.0, height: 30.0, child: (child as AppBar).leading);
}
static const textStyle = TextStyle(fontSize: 32.0);
}
但這當然行不通,因為(child as AppBar).leading
是最終的。
因此,在下面的 AppBar 中(出於說明目的,文本大小顯着變大),相比之下,我想讓自動添加的漢堡包圖標變大。
你怎么看? 是否有解決方案,或者我應該放棄自動圖標並自己添加它們?
編輯:添加圖像以顯示我的意思
你不能,因為它是一個預定義的小部件。
您可以使用 Row 小部件解決它:
Scaffold(
key:_scaffoldKey,
drawer: Drawer(),
appBar: AppBar(
automaticallyImplyLeading: false
title: Row(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
SizedBox(
height: 20, // Your Height
width: 20, // Your width
child: IconButton( // Your drawer Icon
onPressed: () => _scaffoldKey.currentState.openDrawer()),
icon: Icon(Icons.arrow_back, color: Colors.white),
),)
// Your widgets here
],
),
),
)
您需要使用_scaffoldKey.currentState.openDrawer()打開抽屜的鑰匙。
automaticallyImplyLeading: false將阻止默認的抽屜圖標。
一個簡單的例子來證明 Raffi Jonas 的回答
AppBar(
automaticallyImplyLeading: false,
title: Row(
children: [
Expanded(
child: Text('One'),
),
Center(
child: Text('Two'),
),
Expanded(
child: Align(
alignment: Alignment.centerRight,
child: Text('Three'),
),
),
],
),
),
可以使用leadingWidth
屬性調整 Flutter 中 AppBar 的前導 Widget 寬度。
例如:
AppBar(
title: const Text('Title'),
leadingWidth: 50,
leading: Container()
)
你想要的是 Flutter 中的自定義應用欄。 大多數人嘗試在AppBar
的title
參數中提供他們自己的小部件。 但是讓我告訴你如何正確地做。
@override
Widget build(BuildContext context) => Scaffold(
appBar: _appBar(),
body: _body(),
);
//Custom AppBar
_appBar() => PreferredSize(
//kToolBarHeight: Default size used by all AppBar widgets in Flutter.
//MediaQuery...: viewPadding.top is StatusBar area. viewPadding.bottom is iPhone bottom bar.
preferredSize: PreferredSize.fromHeight(kToolBarHeight + MediaQuery.of(context).viewPadding.top),
child: Container(
child: Row(
//This will spread Row content evenly across the screen.
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
//Leading Widget
Icon(Icons.home),
//Title
Text("Hello World!"),
//Trailing Widget / Actions
Icon(Icons.home),
],
),
),
);
Widget _body() => Container(
color: Colors.blue,
);
您可以為高度或寬度設置邊距。
AppBar(
leading: Container(
margin: EdgeInsets.symmetric(vertical: 15),
child: IconButton(
icon: Icon(CupertinoIcons.chevron_left),
onPressed: () {},
),
),
要使用自定義 appBar 前導按鈕,這里是代碼。
appBar: AppBar(
title: Text('hello'),
// automaticallyImplyLeading: false,
elevation: 0,
leadingWidth: 58,
actions: [
ProfileBar(),
],
leading: Container(
width: 14,
//color: Colors.yellow,
child: Row( // <--- Using row to avoid force resizing of leading
children: [
Padding( // <--- Padding to make it look more nicer
padding: const EdgeInsets.only(left: 24.0),
child: GestureDetector(
onTap: () {
Navigator.of(context).pop();
},
child: SvgPicture.asset( // <-- Using SvgPicture package
'assets/svg/icons/backbtn.svg',
width: 24,
height: 24,
),
),
),
],
),
),
),
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.