在 flutter 中更改页面

Question

我正在尝试用 flutter 编写一个应用程序，但我不知道更改页面的最佳方法是什么，我想要一个底部导航栏来在页面之间切换，但我也想要能够通过向左或向右滚动来更改页面，我还想在应用栏上有一个按钮来切换到单独的页面，我不知道是应该使用导航器还是页面视图，如果我必须使用导航器，每个页面都应该有自己的脚手架吗？因为我尝试过这种方式，但我不喜欢这样的事实，即每次不仅页面发生变化，底部导航栏和应用栏也会发生变化，谢谢！

Answer 1

你的问题的答案有很多教程和文档。使用可滚动的底部导航栏来移动每个页面正在使用 TabBar 小部件

您可以将 TabBar 小部件放在 bottomNavigationBar 属性上 Scaffold 并包装 TabBar 和 Container 用于提供背景颜色。

TabBar 小部件具有 isScrollable 属性，可以通过滚动移动每个页面。示例：

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(),
      );
  }
}

创建新的飞镖文件

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

对于每个页面，您可以使用无状态或有状态的小部件编写 class 新的 dart 文件

例如

homepage.dart

import 'package:flutter/material.dart';

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

对于您想要的单独页面，您可以在 Scaffold 小部件中使用 drawer 属性。您可以检查 here 以构建 Drawer 小部件

在 flutter 中更改页面

changing pages in flutter

navigator

flutter

flutter-layout