Виджет боковой панели навигации Flutter - PullRequest
Новая
       5

Виджет боковой панели навигации Flutter

1 голос
/ 27 мая 2020

Скриншот того, что я ищу

Как я могу получить эту боковую панель навигации (слева) во Flutter? Для этого есть виджет, если я не ошибаюсь, но нигде не могу найти название.

Ответы [ 2 ]

1 голос
/ 27 мая 2020

Виджет, который вы ищете, называется NavigationRail.
Он очень хорошо задокументирован как часть официального Flutter API .

пример использования выглядит следующим образом: 

int _selectedIndex = 0;

@override
Widget build(BuildContext context) {
  return Scaffold(
    body: Row(
      children: <Widget>[
        NavigationRail(
          selectedIndex: _selectedIndex,
          onDestinationSelected: (int index) {
            setState(() {
              _selectedIndex = index;
            });
          },
          labelType: NavigationRailLabelType.selected,
          destinations: [
            NavigationRailDestination(
              icon: Icon(Icons.favorite_border),
              selectedIcon: Icon(Icons.favorite),
              label: Text('First'),
            ),
            NavigationRailDestination(
              icon: Icon(Icons.bookmark_border),
              selectedIcon: Icon(Icons.book),
              label: Text('Second'),
            ),
            NavigationRailDestination(
              icon: Icon(Icons.star_border),
              selectedIcon: Icon(Icons.star),
              label: Text('Third'),
            ),
          ],
        ),
        VerticalDivider(thickness: 1, width: 1),
        // This is the main content.
        Expanded(
          child: Center(
            child: Text('selectedIndex: $_selectedIndex'),
          ),
        )
      ],
    ),
  );
}
0 голосов
/ 27 мая 2020

Это называется Navigation Rail. Вы можете узнать больше здесь

Использование: 

child:NavigationRail(
  selectedIndex:_currentIndex,
  onDestinationSelected: (int index) {
    setState(() {
      // Change Index When Widget is Selected.
      _currentIndex = index;
    });
  destinations:[
    // You Navigation Rail Items/Destinations
    NavigationRailDestination(
      icon: Icon(Icons.favorite_border),
      selectedIcon: Icon(Icons.favorite),
      label: Text('Home'),
    ),
  ]
  },
...