Блог

Я пытаюсь запрограммировать приложение с помощью flutter, но я не понимаю, как лучше всего менять страницы, я хотел бы иметь нижнюю панель навигации для переключения между страницами, но я также хотел бы иметь возможность менять страницу, прокручивая ее влево или вправо, и я также хочу чтобы иметь кнопку на панели приложений для переключения на отдельную страницу, я не понимаю, следует ли мне использовать навигатор или просмотр страницы, и если мне нужно использовать навигатор, должна ли каждая страница иметь свой собственный каркас? потому что я пробовал так, но мне не нравится тот факт, что каждый раз меняется не только страница, но и нижняя панель навигации и панель приложений, спасибо!

В ответе на ваш вопрос есть много руководств и документов. для использования нижней панели навигации с возможностью прокрутки для перемещения каждой страницы используется виджет панели вкладок

Вы можете поместить виджет TabBar в свойства BottomNavigationBar внутри Scaffold и обернуть TabBar контейнером для придания цвета фона.

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

main.dart

 import 'package:flutter/material.dart';
import 'package:app_name/structure.dart';

void main(){
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Structure(),
      );
  }
}
 

создайте новый файл dart

structure.dart

 import 'package:flutter/material.dart';
import 'package:app_name/homepage.dart';
import 'package:app_name/searchpage.dart';
import 'package:app_name/notificationpage.dart';

class Structure extends StatefulWidget {
  const Structure({Key? key}) : super(key: key);

  @override
  _StructureState createState() => _StructureState();
}

class _StructureState extends State<Structure> {
  final GlobalKey<ScaffoldState> _scaffoldKey = new GlobalKey<ScaffoldState>();
  int _currentTabIndex = 0;
  TabController _controller;

  final _pages = [
    HomePage(),
    SearchPage(),
    NotificationPage(),
    // add any page class
  ];

  final _bottomBarItems = [
    Tab(text: "Home", icon: Icon(Icons.home)),
    Tab(text: "Search", icon: Icon(Icons.search)),
    Tab(text: "Notif", icon: Icon(Icons.notifications)),
    // add any icon for each page class on bottom bar navigation
  ];

  void onTapBar(int index) {
    setState(() {
      _currentIndex = index;
    });
  }

  @override
  void initState() {
    super.initState();
    _controller = TabController(vsync: this, length: 2);
    _controller.addListener(_handleTabSelection);
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      drawer: Drawer(
        // drawer widget for build separate page u want
        // with hamburger icon in App Bar
      ),
      appBar: AppBar(),
      body: _pages[_currentTabIndex],
      bottomNavigationBar: Container(
        color: Colors.white,
        child: TabBar(
          isScrollable: false,
          // set isScrollable to true
          // if you want to able move the page by scrolling 
          controller: _controller,
          unselectedLabelColor: Colors.black87,
          labelStyle: TextStyle(fontSize: 10),
          labelColor: Colors.red.shade700,
          indicatorSize: TabBarIndicatorSize.tab,
          indicator: UnderlineTabIndicator(
          borderSide: BorderSide(width: 3),
          insets: EdgeInsets.fromLTRB(40, 0, 40, 0)),
          tabs: _bottomBarItems,
       ),
      ),
    );
  }
}
 

Примечание: вам нужно установить для isScrollable значение true

для каждой страницы вы можете написать с помощью класса виджета без состояния или с сохранением состояния с новым файлом dart

например

домашняя страница.dart

 import 'package:flutter/material.dart';

class HoomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.red,
    );
  }
}
 

Для отдельной страницы, которую вы хотите, вы можете использовать свойства ящика внутри виджета Scaffold.
вы можете проверить здесь, как создать виджет ящика