如何通过滚动在主屏幕的pageView中显示当前卡片后面的下一张卡片?

时间:2019-07-30 05:33:59

标签: flutter dart flutter-animation

我想要这样 https://dribbble.com/shots/3593825-Android-Card-Slider-Preview-Open-Source

如何通过滚动在主屏幕上显示当前卡后面的下一张卡?我试图创建这个。但我失败了这是我的代码。我不知道如何在主屏幕上显示下一张卡片?

PageView.builder(
        controller: controller,
        scrollDirection: Axis.vertical,

进行倒序

        reverse: true,
        itemBuilder: (context, position) {

当前卡

          if (position == currentPageValue.floor()) {
            return Transform(
              transform: Matrix4.identity()
                ..rotateY(currentPageValue - position),
              child: Container(
                color: position % 2 == 0 ? Colors.blue : Colors.pink,
                child: Center(
                  child: Text(
                    "current card",
                    style: TextStyle(color: Colors.white, fontSize: 22.0),
                  ),
                ),
              ),
            );
          }

下一张卡

 else if (position == currentPageValue.floor() + 1) {
                return Transform(
                  transform: Matrix4.identity()
                    ..rotateY(currentPageValue - position),
                  child: Container(
                    color: position % 2 == 0 ? Colors.blue : Colors.pink,
                    child: Center(
                      child: Text(
                        "next Card",
                        style: TextStyle(color: Colors.white, fontSize: 22.0),
                      ),
                    ),
                  ),
                );
              }
              else {
                return Container(
                  height: 100.0,
                  width: 100.0,
                  color: position % 2 == 0 ? Colors.yellow : Colors.black,
                  child: Center(
                    child: Text(
                      "Page else",
                      style: TextStyle(color: Colors.white, fontSize: 22.0),
                    ),
                  ),
                );
              }
            },
            itemCount: 10,
          ),

输出看起来像这样

enter image description here

我需要这个,

enter image description here

1 个答案:

答案 0 :(得分:0)

public object GetIDForMaritalStatusDesc(string msd){ if(string.IsNullOrEmpty(msd)) return DBNull.Value; using(SqlCommand sq = new SqlCommand( "connstr here", "SELECT ID FROM MaritalStatusWHERE Desc = @msd" );){ sq.Parameters.AddWithValue("@msd", msd); //note: google "can we stop using addwithvalue already" try{ return sq.ExecuteScalar(); } catch { return DBNull.Value } } }

这并不是您想要的,但是将PageController controller = PageController(viewportFraction: 0.8);属性设置为viewportFraction可能会为您提供线索。