Можете ли вы иметь прокручиваемые вкладки с прозрачной панелью приложений и нижней панелью приложений? - PullRequest
Новая
       30

Можете ли вы иметь прокручиваемые вкладки с прозрачной панелью приложений и нижней панелью приложений?

0 голосов
/ 21 апреля 2019

Я пытаюсь создать макет флаттера, который имеет прозрачную панель приложений и нижнюю панель приложений. Тем не менее, я хочу иметь возможность провести между вкладками. Проблема в том, что у меня могут быть перелистывающиеся вкладки, но тело не находится под панелями приложений. Или я могу разместить тело под панелями приложений, но вкладки нельзя перелистывать.

Я уже пробовал использовать 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 Ответ

0 голосов
/ 26 апреля 2019

Хорошо, просто обновление, мне удалось исправить мою проблему.Я не осознавал, что порядок в стеке определяет, так сказать, его слой.Первый элемент находится в самом конце, и каждый другой элемент выходит на один слой впереди.Таким образом, чтобы исправить это, все, что я сделал, это переставил тело так, чтобы оно было первым, а позиционеры следовали за ним.Это позволило создавать приложения с прозрачными панелями приложений.

...