Question

我想在图像上向左滑动，从“正在显示”导航到“即将推出”，而且，我希望滑动时不移动Appbar，但我认为只有在标签栏和我不确定，如果您知道如何实现这一目标，请给一些建议 enter image description here

Answer 1

根据 GaboBrandX ，他是正确的。但是您也可以使用选项卡来做一件事。滑动将不起作用。它很复杂，但是您可以试一试。

我将为您提供的图片，因此将出现“制表符”，并且在其下方将有一个容器，每个容器都可以通过单击来替换。

TabController controller;
int activeIndex = 0;

@override
void initState() {
  super.initState();
  this.tabController = TabController(length: 3, vsync: this);
}

//This changes the activeIndex based upon the tabController index
onTabChanged(){
  this.setState((){
    this.activeTabIndex = this.tabController.index;
  });
}

//This will return your container, based upon your tabs selected
Widget getActiveTabView(){
  case 1: {return YourSecondContainer();}
  break;

  default: {return YourFirstContainer();}
}

//Here is your full layout
@override
Widget build(BuildContext context) {
  return Column(
    children: <Widget>[
      TMTabBar(titles: 'XYZ', controller: this.tabController, onChange: this.onTabChanged),
       this.getActiveTabView(),
    ]
  );
}

//Create a TabBarWidget and do this
class TMTabBar extends StatefulWidget {

  String/List<String> titles;
  TabController controller;
  VoidCallback onChange;

  TMTabBar({@required this.titles, @required this.controller, this.onChange});

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

class _TMTabBarState extends State<TMTabBar> {

  @override
  void initState() {
    //this is for changing the content as per the tabbar
    this.widget.controller.addListener((){
      if(this.widget.controller.indexIsChanging){
        if(this.widget.onChange != null) this.widget.onChange();
      }
    });

    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return TabBar(tab: YourTabs);
}

这基本上可以为您提供您所希望的。希望能有所帮助。谢谢：）

Answer 2

在这里，我举例说明了您使用PageView的目的。我仅在PageView的子级上放置了文本，但是您可以在其中放置ListViews或所需的任何内容。点击按钮时，PageView导航到相应的“页面”。这可以是您的起点：

import 'package:flutter/material.dart';

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  PageController _pageController = PageController(
    initialPage: 0,
  );

  goToPage(num page) {
    _pageController.animateToPage(
      page,
      duration: Duration(milliseconds: 350),
      curve: Curves.easeIn,
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Stack(
          children: <Widget>[
            Align(
              alignment: Alignment.topCenter,
              child: Container(
                width: double.infinity,
                height: 60.0,
                child: Padding(
                  padding: const EdgeInsets.symmetric(horizontal: 16.0, vertical: 8.0),
                  child: Row(
                    mainAxisSize: MainAxisSize.max,
                    mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                    children: <Widget>[
                      Expanded(
                        child: RaisedButton(
                          onPressed: () => goToPage(0),
                          child: Text('Now Showing'),
                        ),
                      ),
                      SizedBox(
                        width: 4.0,
                      ),
                      Expanded(
                        child: RaisedButton(
                          onPressed: () => goToPage(1),
                          child: Text('Coming Soon'),
                        ),
                      ),
                    ],
                  ),
                ),
              ),
            ),
            Align(
              alignment: Alignment.bottomCenter,
              child: Container(
                width: double.infinity,
                height: MediaQuery.of(context).size.height - 60.0,
                child: PageView(
                  controller: _pageController,
                  children: <Widget>[
                    Center(
                      child: Text('Tab 1'),
                    ),
                    Center(
                      child: Text('Tab 2'),
                    ),
                  ],
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

是否可以在TabBar之类的路线中导航（带有左滑杆），但不使用TabBar，而是使用按钮

2 个答案: