NavBar和Drawer Flutter

huangapple go评论54阅读模式
英文:

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 &#39;package:flutter/material.dart&#39;;

class Navbar extends StatefulWidget {
  const Navbar({Key? key, required this.child}) : super(key: key);
  final Widget child;

  @override
  State&lt;Navbar&gt; createState() =&gt; _NavbarState();
}

class _NavbarState extends State&lt;Navbar&gt; {
  final GlobalKey&lt;ScaffoldState&gt; scaffoldKey = GlobalKey&lt;ScaffoldState&gt;();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      key: scaffoldKey,
      endDrawer: Drawer(
        backgroundColor: kYellowColor,
        child: Column(
          children: [
            Text(&#39;Form&#39;),
            Text(&#39;Receipt&#39;),
          ],
        ),
      ),
      appBar: AppBar(
        backgroundColor: kYellowColor,
        iconTheme: const IconThemeData(color: kBlackColor),
        automaticallyImplyLeading: false,
      ),
      body: widget.child,
    );
  }
}

Here is the current navbar
NavBar和Drawer Flutter

答案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 =&gt; size;// mainly align is handling constraints 
}

And pass size

class _NavbarState extends State&lt;Navbar&gt; {
  final GlobalKey&lt;ScaffoldState&gt; scaffoldKey = GlobalKey&lt;ScaffoldState&gt;();

  @override
  Widget build(BuildContext context) {
    return LayoutBuilder(
      builder: (_, constraints) =&gt; Scaffold(
        key: scaffoldKey,
        endDrawer: Drawer(
          child: Column(
            children: [
              Text(&#39;Form&#39;),
              Text(&#39;Receipt&#39;),
            ],
          ),
        ),
        appBar: MyAppBar(size: Size(constraints.maxWidth * .8, kToolbarHeight)),
        body: widget.child,
      ),
    );
  }
}

huangapple
  • 本文由 发表于 2023年2月24日 04:37:59
  • 转载请务必保留本文链接:https://go.coder-hub.com/75550077.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定