Как установить цвет нижней панели навигации, как у телефона х? - PullRequest
Новая
       56

Как установить цвет нижней панели навигации, как у телефона х?

0 голосов
/ 08 января 2020

сейчас у меня установлена ​​последняя стабильная версия 1.12.13 + исправление.5

Мне нужен полный полноэкранный режим, когда я звоню в android флаттере

введите описание изображения здесь

введите описание изображения здесь

возможно ли в флаттере? мы можем показать множество приложений, таких как android приложение настройки, контакты и т. д. c .....

введите описание изображения здесь

Ответы [ 2 ]

0 голосов
/ 09 января 2020

Я пробовал это, но с панелью приложений, где она прозрачна, но проблема в том, что эти виджеты все еще сохраняют свою высоту, когда-то размещенные внутри скаффолда. Я предполагаю, что это будет тот же случай с BotttomNavigationBar, поэтому в этом случае вы можете добавить его в стек (так я и сделал), так что он появляется поверх вашего контента и отражает его прозрачность, следующим образом: 

Scaffold(
      body: Container(
          color: Colors.red,
          child: Stack(children: <Widget>[
            Align(
                alignment: Alignment.bottomCenter,
                child: BottomNavigationBar(
                    elevation: 0,
                    backgroundColor: Colors.transparent,
                    items: const <BottomNavigationBarItem>[
                      BottomNavigationBarItem(
                        icon: Icon(Icons.home),
                        title: Text('Home'),
                      ),
                      BottomNavigationBarItem(
                        icon: Icon(Icons.business),
                        title: Text('Business'),
                      ),
                      BottomNavigationBarItem(
                        icon: Icon(Icons.school),
                        title: Text('School'),
                      ),
                    ],
                    currentIndex: 0,
                    selectedItemColor: Colors.amber[800])),
            Center(child: Text('hello'))
          ])))

Вы заметите, что нижняя панель навигации будет отображаться красным (потому что она прозрачная и будет отображать цвет родителя (цвет контейнера красный).

0 голосов
/ 08 января 2020

В BottomNavigationBar есть свойство, называемое backgroundColor, которое вы можете использовать Colors.transparent, чтобы сделать его похожим на картинки. Но есть еще два трюка:

  • Вы должны изменить тип BottomNavigationBar на BottomNavigationBar.fixed;
  • Вам нужно изменить высоту, так как это будет большая тень "где должен быть цвет.

Пример кода: 

bottomNavigationBar: BottomNavigationBar(
          type: BottomNavigationBarType.fixed,
          backgroundColor: Colors.transparent,
          elevation: 0,

А если вы хотите, чтобы на значках был эффект сдвига, объявите цвет каждому.

...