appbar下如何滑动页面flutter

Posted 2023-05-07

【中文标题】appbar下如何滑动页面flutter

【英文标题】：How to slide pages under appbar flutter

【发布时间】：2021-06-23 16:51:49

【问题描述】：

我一直在努力为报价应用程序构建页面查看系统。我希望页面从上到下和从下到上全屏流动 可滚动/滑动能够每次在不同的引号之间导航 喜欢this。每次不随意滚动时，滚动都会带来新的页面。到目前为止，我还没有在互联网上找到任何关于此的指南。

我不知道如何构建它，这几天我脑子里什么都没有。我已经尝试使用手势检测器进行上下滑动的页面浏览，它不能按预期工作，并且 appbar 也是静态的，底部容器也是我不想要的。我想要的是页面/屏幕在应用栏下流动，甚至是右上角的一个按钮和底部的 2 个按钮下。

【问题讨论】：

嘿，试试这个api.flutter.dev/flutter/widgets/PageView-class.html

列表视图应该可以工作。尝试使用 ListView，如果它不起作用，请显示代码。

@AmonChowdhury Nah 如果他将所有引号放在同一页面上，Listview 会起作用因为他每页使用一个引号 Pageview 会更合适

如果我做了，列表视图会从容器/卡片下方滑动吗？如果是这样，那么如何。我是否必须为我将制作的容器/卡片或列表视图提供一些属性。

@SaiPrashanth 是的，我每页列出单引号。 Pageview 工作正常，但不能按预期滚动整个页面，我想要 2 个容器/卡片或底部导航栏静态固定，并且页面应该滑过它们，如我附加的视频中所示

【参考方案1】：

创建一列容器，其中每个容器的高度和宽度等于屏幕的高度和宽度。您可以使用：

height: MediaQuery.of(context).size.height,
width: MediaQuery.of(context).size.width,

另外，请确保使用 SingleChildScrollView 小部件包装您的代码以垂直滚动。

代码如下：

return Scaffold(
  appBar: AppBar(
    title: Text(widget.title),
  ),
  body: SingleChildScrollView(
    child: Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          Container(
            height: MediaQuery.of(context).size.height,
            width: MediaQuery.of(context).size.width,
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Center(child: Text('Quote number one')),
                Center(
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      IconButton(icon: Icon(Icons.share), onPressed: () ),
                      IconButton(
                          icon: Icon(Icons.favorite), onPressed: () )
                    ],
                  ),
                )
              ],
            ),
          ),
          Container(
            height: MediaQuery.of(context).size.height,
            width: MediaQuery.of(context).size.width,
            child: Column(
              children: [
                Text('Quote number two'),
                Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    IconButton(icon: Icon(Icons.share), onPressed: () ),
                    IconButton(icon: Icon(Icons.favorite), onPressed: () )
                  ],
                )
              ],
            ),
          )
        ],
      ),
    ),
  ),
);

【参考方案2】：

你可以使用PageView来获取这种类型的视图

Drive Video link

class MyHomePage extends StatefulWidget 
  MyHomePage(Key key, this.title) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();


class _MyHomePageState extends State<MyHomePage> 
  PageController pageController;
  PageView pageView;

  List<String> quotes = [
    '#Quote 1\n\n“I\'m selfish, impatient and a little insecure. I make mistakes, I am out of control and at times hard to handle. But if you can\'t handle me at my worst, then you sure as hell don\'t deserve me at my best.” ',
    '#Qoute 2\n\nSo many books, so little time.',
    '#Quote 3\n\n A room without books is like a body without a soul'
  ];

  @override
  void initState() 
    super.initState();
    pageController = PageController();
    final _quotes = List.generate(quotes.length, (index) => quoteWidget(index));
    pageView = PageView(
      children: _quotes,
      controller: pageController,
      scrollDirection: Axis.vertical,
    );
  

  Widget quoteWidget(int index) 
    return Scaffold(
      backgroundColor: Colors.black,
      body: Column(
        children: [
          Expanded(
            flex: 3,
            child: Padding(
              padding: const EdgeInsets.all(20.0),
              child: Center(
                child: Text(
                  quotes[index],
                  textAlign: TextAlign.center,
                  style: TextStyle(
                    fontSize: 20,
                    fontWeight: FontWeight.w300,
                    color: Colors.white,
                  ),
                ),
              ),
            ),
          ),
          Expanded(
            flex: 1,
            child: Row(
              mainAxisSize: MainAxisSize.max,
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                FloatingActionButton(
                  onPressed: () ,
                  child: Icon(Icons.share),
                ),
                const SizedBox(width: 20),
                FloatingActionButton(
                  onPressed: () ,
                  child: Icon(Icons.favorite_border),
                ),
              ],
            ),
          ),
          Expanded(child: Container())
        ],
      ),
    );
  

  @override
  void dispose() 
    pageController.dispose();
    super.dispose();
  

  @override
  Widget build(BuildContext context) 
    return Scaffold(
      backgroundColor: Colors.black,
      appBar: AppBar(
        brightness: Brightness.dark,
        title: Text(widget.title),
      ),
      body: SafeArea(
        child: Stack(
          alignment: Alignment.bottomCenter,
          children: [
            pageView,
            Padding(
              padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 10),
              child: Row(
                children: [
                  RaisedButton.icon(
                    icon: Icon(Icons.menu_book),
                    label: Text('General'),
                    onPressed: () ,
                  ),
                  const Spacer(),
                  Container(
                    width: 50,
                    height: 50,
                    margin: const EdgeInsets.symmetric(horizontal: 10),
                    decoration: BoxDecoration(
                      color: Colors.white,
                      borderRadius: BorderRadius.circular(5),
                    ),
                    child: Icon(Icons.color_lens),
                  ),
                  Container(
                    width: 50,
                    height: 50,
                    margin: const EdgeInsets.symmetric(horizontal: 10),
                    decoration: BoxDecoration(
                      color: Colors.white,
                      borderRadius: BorderRadius.circular(5),
                    ),
                    child: Icon(Icons.person),
                  ),
                ],
              ),
            )
          ],
        ),
      ),
    );