предисловие
После того, как Google запустила flutter, новую высокопроизводительную кроссплатформенную (Android, ios) среду быстрой разработки, она привлекла внимание многих разработчиков в отрасли. После того, как я столкнулся с флаттером, я обнаружил, что это действительно хорошая вещь, и, конечно же, хорошими вещами нужно делиться с вами, верно?
Сегодня я хочу поделиться с вами реализацией функции нижней навигации. Я думаю, что флаттер должен передать минималистичный дизайн, компонент обращает внимание только на себя, чтобы добиться низкой связанности и высокой сплоченности. Поэтому в этой статье мы сосредоточимся только на реализации этой функции при объяснении нижней навигации и представим идеи компоновки.
чему вы научитесь
- Как разделить части
- Как создать флаттер-макет
- Как создать нижнюю навигацию
Сначала давайте посмотрим на эффект.
компоновка сборки
Шаг 1: Нарисуйте вид макета
Разбейте макет на основные элементы:
- Какие элементы составляют страницу
- Какие элементы управления будут изменяться в результате взаимодействия с пользователем, а какие нет.
Здесь нам нужно подумать над вопросом, где область обновления?
Студенты, которые использовали мобильное приложение, знают, что мы можем щелкнуть нижнюю панель навигации, нижняя часть не будет обновляться, а будет обновляться только верхняя часть. Таким образом, мы можем разделить всю страницу на две части.
Первая часть — это часть страницы в оранжевой рамке, а вторая часть — это часть нашего навигатора внизу. Навигатор всегда один и тот же, поэтому навигатор должен быть на уровне родительского виджета среди них.
Шаг 2: Начните создавать нижнюю навигацию
class BottomNavigationWidget extends StatefulWidget {
@override
State<StatefulWidget> createState() => BottomNavigationWidgetState();
}
class BottomNavigationWidgetState extends State<BottomNavigationWidget> {
final _bottomNavigationColor = Colors.blue;
int _currentIndex = 0;
@override
Widget build(BuildContext context) {
return Scaffold(
bottomNavigationBar: BottomNavigationBar(
items: [
BottomNavigationBarItem(
icon: Icon(
Icons.home,
color: _bottomNavigationColor,
),
title: Text(
'HOME',
style: TextStyle(color: _bottomNavigationColor),
)),
BottomNavigationBarItem(
icon: Icon(
Icons.email,
color: _bottomNavigationColor,
),
title: Text(
'Email',
style: TextStyle(color: _bottomNavigationColor),
)),
BottomNavigationBarItem(
icon: Icon(
Icons.pages,
color: _bottomNavigationColor,
),
title: Text(
'PAGES',
style: TextStyle(color: _bottomNavigationColor),
)),
BottomNavigationBarItem(
icon: Icon(
Icons.airplay,
color: _bottomNavigationColor,
),
title: Text(
'AIRPLAY',
style: TextStyle(color: _bottomNavigationColor),
)),
],
currentIndex: _currentIndex,
onTap: (int index) {
setState(() {
_currentIndex = index;
});
},
),
);
}
}
Здесь мы используем макет Scaffold, который по умолчанию предоставляет свойство bottomNavigationBar. Здесь мы даем ему BottomNavigationBar и помещаем четыре элемента BottomNavigationBarItem (далее именуемые элементами) в этот BottomNavigationBar. Каждый элемент представляет собой кнопку навигации внизу.
Элементы BottomNavigationBar представляют собой массив, поэтому будут индексы. BottomNavigationBar предоставляет нам свойство currentIndex, значение по умолчанию равно 0, давайте зайдем и посмотрим этот метод.
/// The index into [items] of the current active item.
final int currentIndex;
currentIndex представляет текущий выбранный индекс в элементах.
BottomNavigationBar также предоставляет метод onTap. Давайте еще раз посмотрим на этот метод.
/// The callback that is called when a item is tapped.
/// The widget creating the bottom navigation bar needs to keep track of the
/// current index and call `setState` to rebuild it with the newly provided
/// index.
final ValueChanged<int> onTap;
При щелчке элемента в нижней навигации он вызывает этот метод и передает значение индекса текущего элемента, чтобы можно было переключить фокус на элемент в текущем индексе.
Давайте посмотрим на эффект:
Создать страницу переключения
Затем нам нужно создать соответственно четыре страницы, соответствующие четырем элементам, так как четыре страницы очень похожи, здесь размещена только одна. Рекомендуется создать файл дротика для каждой из этих четырех страниц.
import 'package:flutter/material.dart';
class HomeScreen extends StatefulWidget {
@override
State<StatefulWidget> createState() => HomeScreenState();
}
class HomeScreenState extends State<HomeScreen> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('HOME'),
),
);
}
}
Каждая страница представляет собой макет Scaffold с панелью приложений.
Отображение страницы в интерфейсе
Вернемся к нижнему элементу управления навигацией. Так как мы управляем переходом через переменную currentIndex, страница тоже должна зависеть от этой переменной, чтобы синхронизироваться. Здесь мы используем список для соответствия элементам.
List<Widget> pages = List<Widget>();
final _bottomNavigationBarItemColor = Colors.teal;
int _currentIndex = 0;
@override
void initState() {
pages
..add(HomeScreen())
..add(EmailScreen())
..add(AlarmsScreen())
..add(ProfileScreen());
}
Затем пусть основной частью макета Scaffold нашей BottomNavigation будет страница в списке.
body: pages[_bottomNavigationIndex],
Мы позволяем _currentIndex контролировать, какую страницу мы отображаем в основной позиции. Таким образом, мы можем управлять переходом на страницу, нажимая на нижний элемент навигации.
рассмотрение
После двух лет написания этой статьи я обсудил ее с сестрой Ю и обнаружил, что в то время код был еще очень нежным. Эта реализация похоронила некоторые ямы. Ты это видел.
Если вы переключите элемент, переключив индекс списка, произойдут две плохие вещи. Во-первых, как только все страницы вырезаются, состояние теряется. Во-вторых, Element нельзя использовать повторно, что вызовет определенные проблемы с производительностью.
Лучше использовать IndexStack/TabBarView для реализации раздела Body, примеры кода вы можете найти в репозитории Github после статьи. Еще раз спасибо здесьРен Юцзеподнять этот вопрос-
Ссылки по теме:
Полный код: GitHub.com/v Ada ski/VA's…
Обучающее видео на ютубе: Woohoo.YouTube.com/watch?V=I YD…
билибили обучающее видео: воооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооо
Я продолжу делиться опытом флаттера в будущем.Если у вас есть какие-либо вопросы, пожалуйста, ответьте, я скоро обновлю!