При добавлении FAB нижнее поле навигации не отображается - PullRequest
Новая
       36

При добавлении FAB нижнее поле навигации не отображается

0 голосов
/ 24 сентября 2019

Я следил за этим потоком в Github, чтобы решить мой случай, но не исправил его.

Я пытаюсь показать некоторые поля на BottomNavBar, когда добавляю FloatinActionButton в Scaffold, но FAB просто перекрывается и поле не появляется.

Что я хочу:

enter image description here

Что у меня есть:

enter image description here

Код: 

Scaffold(
        extendBody: true,
        resizeToAvoidBottomInset: true,
        body: _children[_currentIndex],
        floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
        floatingActionButton: FloatingActionButton(
          onPressed: () {},
          child: Icon(Icons.search),
          backgroundColor: Colors.blue,
        ),
        bottomNavigationBar: BottomAppBar(
          color: Colors.orange,
          child: Row(
            mainAxisSize: MainAxisSize.max,
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: <Widget>[
              IconButton(
                icon: Icon(Icons.movie),
                tooltip: "Text",
              ),
              IconButton(
                icon: Icon(Icons.person),
                tooltip: "Text",
              )
            ],
          ),
        ))

Обратите внимание, что я пробовал как с BottomAppBar, так и с BottomNavigationBar,Работало использование Stack, но я искал более элегантный способ, поскольку это видео волшебным образом достигает этого.У меня есть последняя версия Flutter.

Примечание: не обращайте внимания на цвета и значки, просто нужно посмотреть, что я не делаю / я делаю неправильно.

Ответы [ 2 ]

1 голос
/ 24 сентября 2019

Класс BottomAppBar имеет два интересующих свойства: shape и notchedMargin ( См. Документы по флаттеру для всех свойств )

Вы можете использовать свойство "shape", чтобы сообщить полосе обтеканиевокруг FAB.Свойство «notchedMargin» принимает двойное значение и определяет маржу, если вам нужен другой разрыв вокруг FAB.

Вам не нужно указывать маржу, если вы не хотите изменять ее по умолчанию.

Попробуйте: 

Scaffold(
    extendBody: true,
    resizeToAvoidBottomInset: true,
    body: _children[_currentIndex],
    floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
    floatingActionButton: FloatingActionButton(
      onPressed: () {},
      child: Icon(Icons.search),
      backgroundColor: Colors.blue,
    ),
    bottomNavigationBar: BottomAppBar(
      color: Colors.orange,
      child: Row(
        mainAxisSize: MainAxisSize.max,
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: <Widget>[
          IconButton(
            icon: Icon(Icons.movie),
            tooltip: "Text",
          ),
          IconButton(
            icon: Icon(Icons.person),
            tooltip: "Text",
          )
        ],
      ),
      shape: CircularNotchedRectangle(),
    ))

Пример снимка экрана с вышеуказанным свойством формы

1 голос
/ 24 сентября 2019

Вы можете применить BottomAppBarTheme к темам своих приложений и придать ей форму: 

return MaterialApp(
    title: 'Flutter Demo',
    theme: ThemeData(
      // This is the theme of your application.
      //
      // Try running your application with "flutter run". You'll see the
      // application has a blue toolbar. Then, without quitting the app, try
      // changing the primarySwatch below to Colors.green and then invoke
      // "hot reload" (press "r" in the console where you ran "flutter run",
      // or simply save your changes to "hot reload" in a Flutter IDE).
      // Notice that the counter didn't reset back to zero; the application
      // is not restarted.
      primarySwatch: Colors.blue,
      bottomAppBarTheme: BottomAppBarTheme(
        shape: CircularNotchedRectangle(),
      ),
    ),
    home: MyHomePage(),
);

Редактировать: развернул фрагмент, чтобы уточнить, куда добавить BottomAppBarTheme

...