flutter 导航栏和抽屉抖动

cgvd09ve 于 2023-02-25 发布在 Flutter

关注(0)|答案(1)|浏览(161)

我希望导航栏内部容器占据屏幕宽度的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,
    );
  }
}

这是当前的导航栏

flutter

来源：https://stackoverflow.com/questions/75550077/navbar-and-drawer-flutter

1条答案

按热度按时间

jq6vz3qz1#

您可以使用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 
}

和通过尺寸

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,
      ),
    );
  }
}

赞(0）回复(0）举报 2023-02-25

我来回答

flutter 导航栏和抽屉抖动

1条答案

相关问题

热门标签

最新问答