英文:
NavBar and Drawer Flutter
问题
我希望导航栏内部容器占据屏幕宽度的80%...使用AppBar Widget是否可能?
这意味着我希望汉堡图标位于右侧(由endDrawer生成)向左移动10%
以下是代码部分,不要翻译:
import 'package:flutter/material.dart';
class Navbar extends StatefulWidget {
const Navbar({Key? key, required this.child}) : super(key: key);
final Widget child;
@override
State<Navbar> createState() => _NavbarState();
}
class _NavbarState extends State<Navbar> {
final GlobalKey<ScaffoldState> scaffoldKey = GlobalKey<ScaffoldState>();
@override
Widget build(BuildContext context) {
return Scaffold(
key: scaffoldKey,
endDrawer: Drawer(
backgroundColor: kYellowColor,
child: Column(
children: [
Text('Form'),
Text('Receipt'),
],
),
),
appBar: AppBar(
backgroundColor: kYellowColor,
iconTheme: const IconThemeData(color: kBlackColor),
automaticallyImplyLeading: false,
),
body: widget.child,
);
}
}
这是当前的导航栏。
英文:
I want the navbar inner container to take 80% of screen width... is that possible with the AppBar Widget?
This means that i want the hamburger icon on the right (generated by endDrawer) to move 10% to the left
import 'package:flutter/material.dart';
class Navbar extends StatefulWidget {
const Navbar({Key? key, required this.child}) : super(key: key);
final Widget child;
@override
State<Navbar> createState() => _NavbarState();
}
class _NavbarState extends State<Navbar> {
final GlobalKey<ScaffoldState> scaffoldKey = GlobalKey<ScaffoldState>();
@override
Widget build(BuildContext context) {
return Scaffold(
key: scaffoldKey,
endDrawer: Drawer(
backgroundColor: kYellowColor,
child: Column(
children: [
Text('Form'),
Text('Receipt'),
],
),
),
appBar: AppBar(
backgroundColor: kYellowColor,
iconTheme: const IconThemeData(color: kBlackColor),
automaticallyImplyLeading: false,
),
body: widget.child,
);
}
}
答案1
得分: 1
你可以使用PreferredSizeWidget
来创建自定义的应用栏。
class MyAppBar extends StatelessWidget with PreferredSizeWidget {
final Size size;
const MyAppBar({
Key? key,
required this.size,
}) : super(key: key);
@override
Widget build(BuildContext context) {
return Align(
child: Container(
color: Colors.cyanAccent,
width: size.width,
height: size.height,
child: Row(
mainAxisAlignment: MainAxisAlignment.end,
children: [Icon(Icons.menu)],
),
),
);
}
@override
Size get preferredSize => size; // 主要是Align处理了约束
}
然后传递size
:
class _NavbarState extends State<Navbar> {
final GlobalKey<ScaffoldState> scaffoldKey = GlobalKey<ScaffoldState>();
@override
Widget build(BuildContext context) {
return LayoutBuilder(
builder: (_, constraints) => Scaffold(
key: scaffoldKey,
endDrawer: Drawer(
child: Column(
children: [
Text('Form'),
Text('Receipt'),
],
),
),
appBar: MyAppBar(size: Size(constraints.maxWidth * .8, kToolbarHeight)),
body: widget.child,
),
);
}
}
英文:
You can create custom appbar with PreferredSizeWidget
.
class MyAppBar extends StatelessWidget with PreferredSizeWidget {
final Size size;
const MyAppBar({
Key? key,
required this.size,
}) : super(key: key);
@override
Widget build(BuildContext context) {
return Align(
child: Container(
color: Colors.cyanAccent,
width: size.width,
height: size.height,
child: Row(
mainAxisAlignment: MainAxisAlignment.end,
children: [Icon(Icons.menu)],
),
),
);
}
@override
Size get preferredSize => size;// mainly align is handling constraints
}
And pass size
class _NavbarState extends State<Navbar> {
final GlobalKey<ScaffoldState> scaffoldKey = GlobalKey<ScaffoldState>();
@override
Widget build(BuildContext context) {
return LayoutBuilder(
builder: (_, constraints) => Scaffold(
key: scaffoldKey,
endDrawer: Drawer(
child: Column(
children: [
Text('Form'),
Text('Receipt'),
],
),
),
appBar: MyAppBar(size: Size(constraints.maxWidth * .8, kToolbarHeight)),
body: widget.child,
),
);
}
}
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论