Flutter / Dart: настройка высоты нижней панели навигации - PullRequest
Новая
       15

Flutter / Dart: настройка высоты нижней панели навигации

0 голосов
/ 13 декабря 2018

Есть ли способ настроить высоту BottomNavigationBar?

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

@override
Widget build(BuildContext context) {
return Scaffold(
  appBar: AppBar(
    backgroundColor: Colors.blue,
    title: Text( 'RefLog', style: Styles.headerLarge ),
    actions: <Widget>[
      new IconButton(
        icon: Icon(Icons.list),
        onPressed: () {},
      )
    ],
  ),
  body: DefaultTabController(
    length: 3,
    child: Scaffold(
      body: TabBarView(
        children: _children,
      ),
      bottomNavigationBar: TabBar(
        tabs: [
          Tab( text: 'One', icon: Icon(Icons.import_contacts, size: 20.0) ),
          Tab( text: 'Two', icon: Icon(Icons.restaurant, size: 20.0) ),
          Tab( text: 'Three', icon: Icon(Icons.record_voice_over, size: 20.0) ),
        ],
        labelStyle: TextStyle(fontSize: 12.0),
        labelColor: Colors.white,
        unselectedLabelColor: Colors.white30,
        indicatorSize: TabBarIndicatorSize.label,
        indicatorColor: Colors.white,
      ),
      backgroundColor: Colors.blue,
    ),
  ),
 );
}

Ответы [ 4 ]

0 голосов
/ 15 марта 2019

Вы можете обернуть нижнюю навигационную панель от SizedBox, 

bottomNavigationBar: SizedBox(height: 58, child: //some widget )
0 голосов
/ 15 февраля 2019

У меня была такая же проблема, высота BottomNavigationBar не может быть переопределена, мое решение было изменено с помощью иконок SizedBox, оно уменьшает высоту, другое окончательное решение было обновленоразмер шрифта свойства title, это мой пример: 

new BottomNavigationBarItem(
              icon:new SizedBox(
                child: new IconButton(
                    icon: new Image.asset("assets/images/icon_ar.png"),
                    onPressed: () {}),
                width: 38,
                height: 38,
              ),
              title: new Text("", style: new TextStyle(fontSize: 0),))

Это значит, что мой BottomNavigationBar имел стандарт размера на обеих платформах.

0 голосов
/ 15 февраля 2019

Вы можете создать свой собственный виджет 

 Widget customBottomNavigationBar(BuildContext context){
    double myHeight =100.0;//Your height HERE
    return SizedBox(
    height: myHeight,
    width: MediaQuery.of(context).size.width,
    child:TabBar(
            tabs: [
              Tab( text: 'One', icon: Icon(Icons.import_contacts, size: 20.0) ),
              Tab( text: 'Two', icon: Icon(Icons.restaurant, size: 20.0) ),
              Tab( text: 'Three', icon: Icon(Icons.record_voice_over, size: 20.0) ),
            ],
            labelStyle: TextStyle(fontSize: 12.0),
            labelColor: Colors.white,
            unselectedLabelColor: Colors.white30,
            indicatorSize: TabBarIndicatorSize.label,
            indicatorColor: Colors.white,
          ),
    );
}

@override
Widget build(BuildContext context) {
return Scaffold(
  appBar: AppBar(
    backgroundColor: Colors.blue,
    title: Text( 'RefLog', style: Styles.headerLarge ),
    actions: <Widget>[
      new IconButton(
        icon: Icon(Icons.list),
        onPressed: () {},
      )
    ],
  ),
  body: DefaultTabController(
    length: 3,
    child: Scaffold(
      body: TabBarView(
        children: _children,
      ),
      bottomNavigationBar: customBottomNavigationBar(context),
      backgroundColor: Colors.blue,
    ),
  ),
);
}
0 голосов
/ 13 декабря 2018

Есть ли способ настроить высоту BottomNavigationBar?

Нет

Почему?

Потому что разработчики этогоВиджет не дал нам никакого контроля, чтобы играть с ним.

Но как мне этого добиться?

Читать эту статью

Кроме того, если вы подготовите заказ BottomNavBar, вам придется позаботиться о слушателях самостоятельно.Это не просто создание Container с Row из IconButtons.

...