在颤动中改变页面

Question

我正在尝试使用颤振编写应用程序，但我没有得到更改页面的最佳方法，我希望有一个底部导航栏来在页面之间进行更改，但我也想成为能够通过向左或向右滚动来更改页面，并且我还希望在应用栏上有一个按钮来切换到单独的页面，如果我应该使用导航器或页面浏览，我没有得到，如果我有要使用导航器，每个页面都应该有自己的脚手架吗？因为我尝试过这种方式，但我不喜欢每次不仅页面更改而且底部导航栏和应用栏更改的事实，谢谢！

Answer 1

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

您可以将 TabBar 小部件放在 Scaffold 内的 bottomNavigationBar 属性上，并用 ContainerTabBar /strong> 用于提供背景颜色。

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

创建新的飞镖文件

结构.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 文件的 Stateless 或 Stateful 小部件类编写

例如

主页.dart

import 'package:flutter/material.dart';

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

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