Flutter：带有溢出容器的滑块库

Question

我遇到了一个问题。 我是一个新手，想弄清楚如何做一个简单的向左滑动/向右滑动画廊。

我正在寻找一个支持手势和某种溢出的小部件。

所以我想要一个具有固定（我可以定义的宽度/高度）的容器，并且该容器之外的所有内容都应该被隐藏，并且当用户滑动内部内容时，它应该显示下一张幻灯片。您能否指出用 Flutter 实现这一点的最佳方法是什么，以及适合这些目标的最佳容器类型是什么。谢谢

UPD 1： 它不应该是一个完整的屏幕，而是一个特定的容器。

Answer 1

您只需要使用PageView 小部件来实现viewpager 功能，您可以根据需要水平或垂直使用它，因为您想要水平的PageView，所以我使用了scrollDirection: Axis.horizontal。我已经制作了它的demo，请检查一次

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';

class HomeScreen extends StatefulWidget {

  @override
  State<StatefulWidget> createState() {
    // TODO: implement createState
    return _HomeScreen();
  }
}

class _HomeScreen extends State<HomeScreen> {
  static final GlobalKey<ScaffoldState> _scaffoldKey =
  GlobalKey<ScaffoldState>();
  ///Page Controller for the PageView
  final controller = PageController(
    initialPage: 0,
  );
  @override
  Widget build(BuildContext context) {
    Size _screenSize = MediaQuery.of(context).size;
    return Scaffold(
      key: _scaffoldKey,
      appBar: AppBar(
        centerTitle: true,
        title: Text(
          'Horizontal Viewpager',
          style: TextStyle(
              fontSize: 20.0,
              fontWeight: FontWeight.bold,),
        ),
      ),
      ///A Page View with 3 children
      body: PageView(
        controller: controller,
        scrollDirection:  Axis.horizontal,

      physics: BouncingScrollPhysics(),
        pageSnapping: true,
        children: <Widget>[
          Container(
            color: Colors.white,
            child: Card(
              color: Colors.lightBlue,
              elevation: 4,
              margin: EdgeInsets.all(24),
              child: Center(
                child: Text(
                  "Card 1",
                  style: TextStyle(
                      color: Colors.white,
                      fontSize: 24),
                ),
              ),
            ),
          ),
          Container(
            color: Colors.white,
            child: Card(
              color: Colors.purpleAccent,
              elevation: 4,
              margin: EdgeInsets.all(24),
              child: Center(
                child: Text(
                  "Card 2",
                  style: TextStyle(
                      color: Colors.white,
                      fontSize: 24),
                ),
              ),
            ),
          ),
          Container(
            color: Colors.white,
            child: Card(
              color: Colors.pink,
              elevation: 4,
              margin: EdgeInsets.all(24),
              child: Center(
                child: Text(
                  "Card 3",
                  style: TextStyle(
                      color: Colors.white,
                      fontSize: 24),
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }
}

上述程序的输出如下

您可以查看我的另一个示例，其中我创建了固定高度的可滑动Click here

我再发一个例子，因为你需要PagewView两边的指标，你需要使用Row和Expaned如下

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';

class HomeScreen extends StatefulWidget {

  @override
  State<StatefulWidget> createState() {
    // TODO: implement createState
    return _HomeScreen();
  }
}

    class _HomeScreen extends State<HomeScreen> {
      static final GlobalKey<ScaffoldState> _scaffoldKey =
      GlobalKey<ScaffoldState>();

      var selectedPage = 0;


      PageController _controller = PageController(initialPage: 0, keepPage: true);

      @override
      Widget build(BuildContext context) {
        Size _screenSize = MediaQuery
            .of(context)
            .size;
        return Scaffold(
          key: _scaffoldKey,
          appBar: AppBar(
            centerTitle: true,
            title: Text(
              'Horizontal Viewpager',
              style: TextStyle(
                fontSize: 20.0,
                fontWeight: FontWeight.bold,),
            ),
          ),

          ///A Page View with 3 children
          body: Container(


            child:Container(
              height: MediaQuery.of(context).size.height*0.4,
              child:  Row(
                children: <Widget>[

                  Expanded(
                    flex: 1,
                    child:
                    IconButton(
                      icon: Icon(Icons.arrow_back),
                      highlightColor: Colors.pink,
                      onPressed: () {
                        setState(() {
                          if (selectedPage > 0) {
                            selectedPage = selectedPage - 1;
                            _controller.jumpToPage(selectedPage);
                            print("VALUES==>>>>> $selectedPage");
                          }
                        });
                      },
                    ),
                  ), Expanded(
                    flex: 8,
                    child: PageView(

                      controller: _controller,
                      scrollDirection: Axis.horizontal,
                      physics: BouncingScrollPhysics(),

                      onPageChanged: (index)
                      {
                        selectedPage= index;
                      },
                      pageSnapping: true,
                      children: <Widget>[
                        Container(
                          color: Colors.white,
                          child: Card(
                            color: Colors.lightBlue,
                            elevation: 4,
                            margin: EdgeInsets.all(24),
                            child: Center(
                              child: Text(
                                "Card 1",
                                style: TextStyle(
                                    color: Colors.white,
                                    fontSize: 24),
                              ),
                            ),
                          ),
                        ),
                        Container(
                          color: Colors.white,
                          child: Card(
                            color: Colors.purpleAccent,
                            elevation: 4,
                            margin: EdgeInsets.all(24),
                            child: Center(
                              child: Text(
                                "Card 2",
                                style: TextStyle(
                                    color: Colors.white,
                                    fontSize: 24),
                              ),
                            ),
                          ),
                        ),
                        Container(
                          color: Colors.white,
                          child: Card(
                            color: Colors.pink,
                            elevation: 4,
                            margin: EdgeInsets.all(24),
                            child: Center(
                              child: Text(
                                "Card 3",
                                style: TextStyle(
                                    color: Colors.white,
                                    fontSize: 24),
                              ),
                            ),
                          ),
                        ),
                      ],
                    ),
                  ),
                  Expanded(
                    flex: 1,
                    child:
                    IconButton(
                      icon: Icon(Icons.arrow_forward),
                      highlightColor: Colors.pink,
                      onPressed: () {
                        if (selectedPage <3) {
                          selectedPage = selectedPage + 1;
                          _controller.jumpToPage(selectedPage);

                          print("VALUES==>> $selectedPage");
                        }
                      },
                    ),
                  )

                ],
              ),
            )


           ,

          )

          ,
        );
      }
    }

请检查下面的输出

Answer 2

您可以使用carousel_slider 2.1.0 包。

它还有许多自定义选项。

https://pub.dev/packages/carousel_slider