Можете ли вы иметь прокручиваемые вкладки с прозрачной панелью приложений и нижней панелью приложений?
Я пытаюсь создать макет флаттера, который имеет прозрачную панель приложений и нижнюю панель приложений. Тем не менее, я хочу иметь возможность провести между вкладками. Проблема в том, что у меня могут быть перелистывающиеся вкладки, но тело не находится под панелями приложений. Или я могу разместить тело под панелями приложений, но вкладки нельзя перелистывать.
Я уже пробовал реализацию с использованием Stack(), а не Scaffold(). Тем не менее, я думаю, что это помещает TabBarView перед панелями приложений из-за невозможности различить тело и панели приложений.
Это код, в котором панели приложения не видны:
class _AppStateTab extends State<App>{
@override
Widget build(BuildContext context) {
return MaterialApp(
home: DefaultTabController(
length: 3,
child: Stack(
children: <Widget>[
Positioned(
top: 0.0,
left: 0.0,
right: 0.0,
child: AppBar(
backgroundColor: Colors.transparent,
elevation: 0.0,
actions: <Widget>[
IconButton(
icon: Icon(Icons.search),
color: Colors.white,
onPressed: () {},
),
IconButton(
icon: Icon(Icons.cached),
color: Colors.white,
onPressed: () {},
),
],
),
),
Positioned(
bottom: 0.0,
left: 0.0,
right: 0.0,
child: BottomAppBar(
color: Colors.transparent,
elevation: 0.0,
child: Row(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
IconButton(
icon: Icon(Icons.dialpad),
color: Colors.white,
onPressed: (){},
),
IconButton(
icon: Icon(Icons.camera_alt),
color: Colors.white,
onPressed: (){},
),
IconButton(
icon: Icon(Icons.edit),
color: Colors.white,
onPressed: (){},
),
],
),
),
),
TabBarView(
children: <Widget>[
Calculator(),
Camera(),
Solution(),
],
)
],
),
),
);
}
}
И это код, в котором тело не перемещается под панелями приложений:
@override
Widget build(BuildContext context){
return Scaffold(
appBar: AppBar(
title: Text('data'),
backgroundColor: Colors.transparent,
elevation: 0.0,
),
body: TabBarView(
controller: _tabController,
children: _tabList,
),
bottomNavigationBar: BottomAppBar(
color: Colors.transparent,
elevation: 0.0,
child: Row(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
IconButton(
icon: Icon(Icons.dialpad),
color: Colors.white,
onPressed: (){
_tabController.animateTo(0);
},
),
IconButton(
icon: Icon(Icons.camera_alt),
color: Colors.white,
onPressed: (){
_tabController.animateTo(1);
},
),
IconButton(
icon: Icon(Icons.edit),
color: Colors.white,
onPressed: (){
_tabController.animateTo(2);
},
),
],
),
),
);
1 ответ
Хорошо, только обновление, мне удалось исправить мою проблему. Я не осознавал, что порядок в стеке определяет, так сказать, его слой. Первый элемент находится в самом конце, и каждый другой элемент выходит на один слой впереди. Таким образом, чтобы исправить это, все, что я сделал, это переставил тело так, чтобы оно было первым, а позиционеры следовали за ним. Это позволило создать простое приложение с прозрачными панелями приложений.