flutter - 是否可以像在 TabBar 中那样通过路线导航(带左滑动)但不使用 TabBar 而是使用按钮

Question

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

Answer 1

在这里，我使用 PageView 举例说明了您要查找的内容。我只在 PageView 的子级上放置了文本，但您可以将您的 ListView 或任何您需要的东西放在那里。当点击按钮时，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'),
                    ),
                  ],
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}