如何在 Appbar 上制作不同对齐方式的一些图标?
How to make some icons at Appbar with different alignment?
我遇到了一些问题。我想在 AppBar
中制作一个图像、一个文本和两个图标,但我不能让它按我想要的方式工作。
我试着在图片和文字之后连续做了一些字体。图片和文字在我的 AppBar
中成功显示,但其余 2 种字体(手推车和通知)显示一些错误。
Widget build(BuildContext context) {
return new Scaffold(
backgroundColor: Colors.amber,
appBar: new AppBar
(
title: new Row
(
mainAxisAlignment: MainAxisAlignment.start,
children:
[
Image.asset('images/logoapp.png',fit: BoxFit.contain,height: 32,),
Container(padding: const EdgeInsets.all(8.0), child: Text('Solid Shop'))
],
)
),
.....
使用 leading
在 appBar 标题前设置一个小部件,并使用 actions
指定 appBar 中显示在 appBar 标题右侧的小部件列表。
AppBar(
leading: Image.asset('yourImage'), // you can put Icon as well, it accepts any widget.
title: Text ("Your Title"),
actions: [
Icon(Icons.add),
Icon(Icons.add),
],
);
了解更多信息 here
您需要使用 actions
而不是 title
actions: <Widget>[
Image.asset('images/logoapp.png',fit: BoxFit.contain,height: 32,),
Container(padding: const EdgeInsets.all(8.0), child: Text('Solid Shop')),
Image.asset('images/logoapp.png',fit: BoxFit.contain,height: 32,), // here add notification icon
Container(padding: const EdgeInsets.all(8.0), child: Text('Solid Shop')) // here add other icon
],
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Solid Shop"),
leading: Image.asset("your_image_asset"),
actions: <Widget>[
IconButton(icon: Icon(Icons.shopping_cart), onPressed: () {}),
IconButton(icon: Icon(Icons.message), onPressed: () {}),
],
),
);
}
您可以在应用栏上添加图标和图片,此代码适用于我:-
应用栏:应用栏(
centerTitle: true,
elevation: 2,
title: Center(
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Image.asset(
"assets/images/bell.png",
fit: BoxFit.contain,
height: 28,
),
Container(
child: Text(" APP BAR"),
)
],
),
),
actions: [
IconButton(
icon: Icon(Icons.settings),
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) {
return Settings();
},
),
);
},
color: Colors.white,
)
],
),
希望这对您有所帮助。
我遇到了一些问题。我想在 AppBar
中制作一个图像、一个文本和两个图标,但我不能让它按我想要的方式工作。
我试着在图片和文字之后连续做了一些字体。图片和文字在我的 AppBar
中成功显示,但其余 2 种字体(手推车和通知)显示一些错误。
Widget build(BuildContext context) {
return new Scaffold(
backgroundColor: Colors.amber,
appBar: new AppBar
(
title: new Row
(
mainAxisAlignment: MainAxisAlignment.start,
children:
[
Image.asset('images/logoapp.png',fit: BoxFit.contain,height: 32,),
Container(padding: const EdgeInsets.all(8.0), child: Text('Solid Shop'))
],
)
),
.....
使用 leading
在 appBar 标题前设置一个小部件,并使用 actions
指定 appBar 中显示在 appBar 标题右侧的小部件列表。
AppBar(
leading: Image.asset('yourImage'), // you can put Icon as well, it accepts any widget.
title: Text ("Your Title"),
actions: [
Icon(Icons.add),
Icon(Icons.add),
],
);
了解更多信息 here
您需要使用 actions
而不是 title
actions: <Widget>[
Image.asset('images/logoapp.png',fit: BoxFit.contain,height: 32,),
Container(padding: const EdgeInsets.all(8.0), child: Text('Solid Shop')),
Image.asset('images/logoapp.png',fit: BoxFit.contain,height: 32,), // here add notification icon
Container(padding: const EdgeInsets.all(8.0), child: Text('Solid Shop')) // here add other icon
],
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Solid Shop"),
leading: Image.asset("your_image_asset"),
actions: <Widget>[
IconButton(icon: Icon(Icons.shopping_cart), onPressed: () {}),
IconButton(icon: Icon(Icons.message), onPressed: () {}),
],
),
);
}
您可以在应用栏上添加图标和图片,此代码适用于我:-
应用栏:应用栏(
centerTitle: true,
elevation: 2,
title: Center(
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Image.asset(
"assets/images/bell.png",
fit: BoxFit.contain,
height: 28,
),
Container(
child: Text(" APP BAR"),
)
],
),
),
actions: [
IconButton(
icon: Icon(Icons.settings),
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) {
return Settings();
},
),
);
},
color: Colors.white,
)
],
),
希望这对您有所帮助。