一尘不染

TabBarView和BottomNavigationBar来控制在Scaffold主体上显示的内容

flutter

我不能同时使用 TabBarViewBottomNavigationBar来
控制在脚手架主体上显示的内容。使用此代码,TabBarView可以控制或BottomNavigationBar。

我希望能够在所有四个页面之间横向滚动以及选择“主页”和“收藏夹”来控制屏幕上显示的内容。

@override
Widget build(BuildContext context) {
  return new Scaffold(
    appBar: new AppBar(
      title: new Text("Traveler"),
      bottom: new TabBar(controller: controller, tabs: <Tab>[
        new Tab(text: "NEW"),
        new Tab(text: "HOTELS"),
        new Tab(text: "FOOD"),
        new Tab(text: "FUN"),
      ]),
    ),
    body: new Stack(
      children: <Widget>[
        new Offstage(
          offstage: index != 0,
          child: new TickerMode(
            enabled: index == 0,
            child: new Material(child: new NewPage()),
          ),
        ),
        new Offstage(
          offstage: index != 1,
          child: new TickerMode(
            enabled: index == 1,
            child: new Material(child: new HotelsPage()),
          ),
        ),
        new TabBarView(controller: controller, children: <Widget>[
          new NewPage(),
          new HotelsPage(),
          new FoodPage(),
          new FunPage(),
        ]),
      ],
    ),
    bottomNavigationBar: new BottomNavigationBar(
        currentIndex: index,
        onTap: (int index) {
          setState(() {
            this.index = index;
          });
        },
        items: <BottomNavigationBarItem>[
          new BottomNavigationBarItem(
            icon: new Icon(Icons.home),
            title: new Text("Home"),
          ),
          new BottomNavigationBarItem(
            icon: new Icon(Icons.favorite),
            title: new Text("Favorites"),
          ),
        ]),
  );
}

阅读 400

收藏
2020-08-13

共1个答案

一尘不染

我对您的代码进行了一些调整,以实现我认为您要的功能。
您可以通过单击选项卡或向左或向右滑动来在for选项卡之间切换。除了使用之外,Offstages您还可以创建所需类的新实例。

这是一个正在运行的示例,希望对您有所帮助:

import 'package:flutter/material.dart';

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

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

class MyHomePage extends StatefulWidget {
  @override
  State createState() => new MyHomePageState();
}

class MyHomePageState extends State<MyHomePage> with SingleTickerProviderStateMixin {
  TabController _controller;
  int _index;

  @override
  void initState() {
    super.initState();
    _controller = new TabController(length: 4, vsync: this);
    _index = 0;
  }

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text("Traveler"),
        bottom: new TabBar(controller: _controller, tabs: <Tab>[
          new Tab(text: "NEW"),
          new Tab(text: "HOTELS"),
          new Tab(text: "FOOD"),
          new Tab(text: "FUN"),
        ]),
      ),
      body: new TabBarView(
        controller: _controller,
        children: <Widget>[
          new NewPage(_index),
          new HotelsPage(_index),
          new FoodPage(_index),
          new FunPage(_index),
        ],
      ),
      bottomNavigationBar: new BottomNavigationBar(
          currentIndex: _index,
          onTap: (int _index) {
            setState(() {
              this._index = _index;
            });
          },
          items: <BottomNavigationBarItem>[
            new BottomNavigationBarItem(
              icon: new Icon(Icons.home),
              title: new Text("Home"),
            ),
            new BottomNavigationBarItem(
              icon: new Icon(Icons.favorite),
              title: new Text("Favorites"),
            ),
          ]),
    );
  }
}

class NewPage extends StatelessWidget {
  final int index;

  NewPage(this.index);

  @override
  Widget build(BuildContext context) {
    return new Center(
      child: new Text('NewPage, index: $index'),
    );
  }
}

class HotelsPage extends StatelessWidget {
  final int index;

  HotelsPage(this.index);

  @override
  Widget build(BuildContext context) {
    return new Center(
      child: new Text('HotelsPage, index: $index'),
    );
  }
}

class FoodPage extends StatelessWidget {
  final int index;

  FoodPage(this.index);

  @override
  Widget build(BuildContext context) {
    return new Center(
      child: new Text('FoodPage, index: $index'),
    );
  }
}

class FunPage extends StatelessWidget {
  final int index;

  FunPage(this.index);

  @override
  Widget build(BuildContext context) {
    return new Center(
      child: new Text('FunPage, index: $index'),
    );
  }
}

如果对此有任何疑问,请不要犹豫。

2020-08-13