当我对应用栏应用提升时,我最难摆脱应用栏上方的这个微弱的线性伪影。如果我删除提升,线条就会消失,但是我确实想保持应用栏下方的提升效果。我只想让这该死的线条消失!
您会注意到前置摄像头区域和标题之间有一条模糊的灰色线:
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)),
型
任何关于如何保持底部高程的建议,同时隐藏或否定它的顶部部分,将不胜感激。我已经为我花了多少个小时在这条该死的线上而感到尴尬,这条线肯定会困扰我的噩梦。
谢谢你,谢谢
1条答案
按热度按时间gudnpqoy1#
经过太多的尝试和错误,我发现添加一个边界到应用程序栏足以隐藏它上面的行。
我在应用程序栏中使用了
shape: BeveledRectangleBorder(side: BorderSide(color: navBarBG, width: 3)),
,它完全按照我的需要工作。感谢您的关注!