英文:
Flutter AppBar, how to customize
问题
我是新手使用Flutter，我很难理解AppBar的工作原理。
我想要得到类似这样的结果
我的主要问题是如何在leading部分添加一个类似图片中的橙色框，这就是我想要添加的内容：
。
我对leading的问题在于，它具有固定的大小，如果内部内容增大，就会溢出，所以我考虑创建一个使用行和列的自定义应用栏，有关如何继续的任何建议吗？
提前致谢。
英文:
I'm new using Flutter and and I'm having trouble understanding how the AppBar works.
I would like to get a result similar to this
my main problem is how to add a box, similar to the orange one in the picture, inside the leading, that's what i want to add exactly: .
the problem I have with the leading is that, having a fixed size, if what's inside increases in size it overflows, so I thought of creating a custom app bar using rows and columns, any suggestions on how to proceed ?
Thanks in advance.
答案1
得分: 2
I'm try To Solve Your Problem
**Here is Code:**
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
class MyWidget extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
backgroundColor: Colors.transparent,
title: TextButton(
style: TextButton.styleFrom(
backgroundColor: Colors.purple,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(999),
),
),
onPressed: () { },
child: Text('1644 $', style: TextStyle(color: Colors.white))
),
elevation: 0,
actions: [
Row(
children: [
Text("Aujourd'Hui", style: TextStyle(color: Colors.black,fontSize: 19,fontWeight: FontWeight.bold),),
SizedBox(
width: 60,
),
const SizedBox(width: 10),
Icon(Icons.contact_mail, color: Colors.black),
const SizedBox(width: 10),
Icon(Icons.settings, color: Colors.black),
SizedBox(
width: 23,
),
],
),
],
);
}
}
<details>
<summary>英文:</summary>
I'm try To Solve Your Problem
**Here is Code:**
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
class MyWidget extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
backgroundColor: Colors.transparent,
title: TextButton(
style: TextButton.styleFrom(
backgroundColor: Colors.purple,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(999),
),
),
onPressed: () { },
child: Text('1644 $', style: TextStyle(color: Colors.white))
),
elevation: 0,
actions: [
Row(
children: [
Text("Aujourd'Hui", style: TextStyle(color: Colors.black,fontSize: 19,fontWeight: FontWeight.bold),),
SizedBox(
width: 60,
),
const SizedBox(width: 10),
Icon(Icons.contact_mail, color: Colors.black),
const SizedBox(width: 10),
Icon(Icons.settings, color: Colors.black),
SizedBox(
width: 23,
),
],
),
],
),
// body: SafeArea(
// child: Container(
// padding: const EdgeInsets.symmetric(horizontal: 10),
// child: Row(
// children: [
// Expanded(child: Text("Username", style: TextStyle(color: Colors.black),)),
// const SizedBox(width: 10),
// Icon(Icons.message, color: Colors.black),
// const SizedBox(width: 10),
// TextButton(
// style: TextButton.styleFrom(
// backgroundColor: Colors.purple,
// shape: RoundedRectangleBorder(
// borderRadius: BorderRadius.circular(999),
// ),
// ),
// onPressed: () { },
// child: Text('Edit', style: TextStyle(color: Colors.white))
// ),
// ],
// ),
// height: kToolbarHeight,
// ),
// ));
);
}
}
[![enter image description here][1]][1]
[1]: https://i.stack.imgur.com/24RsO.jpg
</details>
# 答案2
**得分**: 0
在这里只是一小段代码。查看它
在leading属性中添加小部件或图标以在一开始显示。
注意：我已经添加了图标，您可以添加任何小部件来替代它。
```dart
AppBar(
leading: IconButton(
icon: Icon(Icons.menu),
onPressed: () {},
),
title: Text("自定义应用"),
actions: [
IconButton(
icon: Icon(Icons.settings),
onPressed: () {},
),
IconButton(
icon: Icon(Icons.search),
onPressed: () {},
),
],
)
这就是你可以做的。Flutter加油！
英文:
Here is just a small piece of code. Look into it
Add widget or icon in leading props to show in the very beginning.
note: I had added the icon, you can add any widget instead of that.
AppBar(
leading: IconButton(
icon: Icon(Icons.menu),
onPressed: () {},
),
title: Text("Customize App"),
),
actions: [
IconButton(
icon: Icon(Icons.settings),
onPressed: () {},
),
IconButton(
icon: Icon(Icons.search),
onPressed: () {},
),
],
This how you can do. Cheers flutter!
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论