dart Flutter:应用程序栏时,应用程序栏上方的视觉伪影

67up9zun  于 12个月前  发布在  Flutter
关注(0)|答案(1)|浏览(111)

当我对应用栏应用提升时,我最难摆脱应用栏上方的这个微弱的线性伪影。如果我删除提升,线条就会消失,但是我确实想保持应用栏下方的提升效果。我只想让这该死的线条消失!
您会注意到前置摄像头区域和标题之间有一条模糊的灰色线:
x1c 0d1x的数据
我尝试过一些变通方法,比如创建一个自定义的preferredsizewidget,在主容器上应用内部框阴影,并将应用栏向上平移几个像素以尝试隐藏这条线。我的实验都有自己的缺点,所有的实验似乎都证明这条线确实只属于应用栏。
下面是我的主要代码:

class _MainPageState extends State<MainPage> {
  //key to maintain the scaffold
  final GlobalKey<ScaffoldState> _key = GlobalKey();

  @override
  Widget build(BuildContext context) {
    return Container(
        color: navBarBG,
        child: SafeArea(
            child: Scaffold(
          key: _key,
          endDrawer: sideDrawer,
          body: ValueListenableBuilder(
              valueListenable: curPageIndex,
              builder: ((context, value, child) => Padding(
                  padding: const EdgeInsets.only(
                      bottom: 0, top: 5, left: 10, right: 10),
                  child: Navigator(
                      clipBehavior: Clip.none,
                      key: navigatorKey,
                      onGenerateRoute: (RouteSettings settings) =>
                          MaterialPageRoute(builder: (BuildContext context) {
                            return 
                                pageList[curPageIndex.value];
                          }))))),
          appBar: AppBar(
            elevation: 3,
            centerTitle: true,
            leading: ValueListenableBuilder(
                valueListenable: transactionsShowing,
                builder: ((context, value, child) =>
                    (transactionsShowing.value == 1)
                        ? IconButton(
                            padding: const EdgeInsets.only(top: 0),
                            onPressed: () {
                              Navigator.of(navigatorKey.currentContext!)
                                  .maybePop({transactionsShowing.value = 0});
                              viewingTransactionID = -1;
                              viewingTransactionType = "";
                            },
                            icon: const Icon(
                              Icons.arrow_back,
                              size: 32,
                            ))
                        : const SizedBox())),
            title: const Padding(
                padding: EdgeInsets.only(top: 0), child: Text("Envilo")),
            actions: [
              //Sets up the drawer button
              Transform.translate(
                  offset: const Offset(0, -12),
                  child: Container(
                      alignment: Alignment.topCenter,
                      padding: const EdgeInsets.only(right: 0),
                      child: IconButton(
                          icon: const Icon(Icons.menu),
                          onPressed: () => {
                                (_key.currentState!.isEndDrawerOpen)
                                    ? _key.currentState!.closeEndDrawer()
                                    : _key.currentState!.openEndDrawer()
                              })))
            ],
          ),
          floatingActionButton: const ActionButton(),
          floatingActionButtonLocation:
              FloatingActionButtonLocation.centerDocked,
          bottomNavigationBar: const BottomNavBar(),
        )));
  }
}

字符串
我的appbar主题:

appBarTheme: AppBarTheme(
        iconTheme: const IconThemeData(color: Colors.black, size: 38),
        elevation: 0,
        //shape: Border(top: BorderSide(width: 3, color: navBarBG)),
        toolbarHeight: 36,
        backgroundColor: navBarBG,
        titleTextStyle: TextStyle(
            height: .8,
            letterSpacing: .6,
            fontWeight: FontWeight.w900,
            fontSize: textSize + 9,
color: Colors.black)),


任何关于如何保持底部高程的建议,同时隐藏或否定它的顶部部分,将不胜感激。我已经为我花了多少个小时在这条该死的线上而感到尴尬,这条线肯定会困扰我的噩梦。
谢谢你,谢谢

gudnpqoy

gudnpqoy1#

经过太多的尝试和错误,我发现添加一个边界到应用程序栏足以隐藏它上面的行。
我在应用程序栏中使用了shape: BeveledRectangleBorder(side: BorderSide(color: navBarBG, width: 3)),,它完全按照我的需要工作。感谢您的关注!

相关问题