Question

我无法同时使用 TabBarView 和 BottomNavigationBar 来控制我的脚手架主体上显示的内容。使用此代码，TabBarView具有控件或BottomNavigationBar。

我希望能够在所有四页之间横向滚动，以及选择HOME和FAVORITES来控制屏幕上显示的内容。

@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"),
          ),
        ]),
  );
}

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

如果您对此有任何疑问，请随时提出。

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

1 个答案: