android - 我怎样才能获得这个UI结果？

Question

我试图从这个人( https://dribbble.com/shots/3812962-iPhone-X-Todo-Concept )那里重新创建一个设计概念，但是我在 ListView 对齐方面遇到了一些麻烦，所以我认为是这样。我想做的是将列表向右移动，而在滑动时不会切割卡片的边缘。

我已经尝试过使用边距和填充，但是应用于容器的这些都没有产生我想要获得的结果。当我滑动时，边缘被切断。

我将其中包含 ListView 的 Container 留在这里。

实际应用程序的屏幕截图: https://imgur.com/a/hJ96sEv

           Container(
              height: 350.0,
              child: ListView.builder(
                physics: NeverScrollableScrollPhysics(),
                itemCount: 3,
                controller: scrollController,
                scrollDirection: Axis.horizontal,
                itemBuilder: (context, position) {
                  return GestureDetector(
                      child: Padding(
                        padding: const EdgeInsets.all(8.0),
                        child: Card(
                          child: Container(
                            width: 250.0,
                            child: Column(
                              crossAxisAlignment: CrossAxisAlignment.start,
                              mainAxisAlignment:
                                  MainAxisAlignment.spaceBetween,
                              children: <Widget>[
                                Padding(
                                  padding: const EdgeInsets.all(8.0),
                                  child: Row(
                                    mainAxisAlignment:
                                        MainAxisAlignment.spaceBetween,
                                    children: <Widget>[
                                      Icon(
                                        cardsList[position].icon,
                                        color: appColors[position],
                                      ),
                                      Icon(
                                        Icons.more_vert,
                                        color: Colors.grey,
                                      )
                                    ],
                                  ),
                                ),
                                Padding(
                                  padding: const EdgeInsets.all(8.0),
                                  child: Column(
                                    crossAxisAlignment:
                                        CrossAxisAlignment.start,
                                    children: <Widget>[
                                      Padding(
                                        padding: const EdgeInsets.symmetric(
                                            horizontal: 8.0, vertical: 4.0),
                                        child: Text(
                                          "${cardsList[position].tasksRemaining} Tasks",
                                          style:
                                              TextStyle(color: Colors.grey),
                                        ),
                                      ),
                                      Padding(
                                          padding:
                                              const EdgeInsets.symmetric(
                                                  horizontal: 8.0,
                                                  vertical: 4.0),
                                          child: Text(
                                            "${cardsList[position].cardTitle}",
                                            style:
                                                TextStyle(fontSize: 28.0),
                                          )),
                                      Padding(
                                        padding: const EdgeInsets.all(8.0),
                                        child: LinearProgressIndicator(
                                          value: cardsList[position]
                                              .taskCompletion,
                                        ),
                                      )
                                    ],
                                  ),
                                ),
                              ],
                            ),
                          ),
                          shape: RoundedRectangleBorder(
                              borderRadius: BorderRadius.circular(10.0)),
                        ),
                      ),
                      onHorizontalDragEnd: (details) {
                        animationController = AnimationController(
                            vsync: this,
                            duration: Duration(milliseconds: 450));
                        curvedAnimation = CurvedAnimation(
                            parent: animationController,
                            curve: Curves.fastOutSlowIn);
                        animationController.addListener(() {
                          setState(() {
                            currentColor =
                                colorTween.evaluate(curvedAnimation);
                          });
                        });

                        if (details.velocity.pixelsPerSecond.dx > 0) {
                          if (cardIndex > 0) {
                            cardIndex--;
                            colorTween = ColorTween(
                                begin: currentColor,
                                end: appColors[cardIndex]);
                          }
                        } else {
                          if (cardIndex < 2) {
                            cardIndex++;
                            colorTween = ColorTween(
                                begin: currentColor,
                                end: appColors[cardIndex]);
                          }
                        }
                        setState(() {
                          scrollController.animateTo((cardIndex) * 256.0,
                              duration: Duration(milliseconds: 450),
                              curve: Curves.fastOutSlowIn);
                        });

                        colorTween.animate(curvedAnimation);

                        animationController.forward();
                      });
                },
              ),
            ),

我想要做的是将列表向右移动，而不是在滑动时切割卡片的边缘。

Answer 1

要实现该目标，您需要一个 PageView 而不是 ListView，这样您就可以在到达特定位置时滑动并“捕捉” View :

PageView.builder(
  itemCount: tasks.length,
  controller: PageController(initialPage: 0, viewportFraction: 0.8),
  itemBuilder: (context, index) {
     return Padding(
         padding: const EdgeInsets.symmetric(vertical: 20, horizontal: 10),
         child: Container(
            decoration: BoxDecoration(
               boxShadow: [
                  BoxShadow(
                     color: Color(0x40000000),
                     blurRadius: 10,
                     offset: Offset(0, 12),
                  ),
               ],
            ),
            child: Card(
              shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(10),
              ),
              color: Colors.white,
              child: Padding(
                 padding: const EdgeInsets.all(15),
                 child: Column(
                    children: <Widget>[
                       IntrinsicHeight(
                          child: Row(
                             crossAxisAlignment: CrossAxisAlignment.start,
                             children: <Widget>[
                                Icon(tasks[index].icon),
                                Expanded(
                                    child: Container(
                                       child: Align(
                                          alignment: Alignment.topRight,
                                          child: Icon(Icons.menu),
                                            ),
                                          ),
                                        ),
                                      ],
                                    ),
                                ),
                                Expanded(
                                  child: Container(
                                    width: double.infinity,
                                    child: Column(
                                      crossAxisAlignment: CrossAxisAlignment.start,
                                      mainAxisAlignment: MainAxisAlignment.end,
                                      children: <Widget>[
                                        Text(
                                          "${tasks[index].tasks} tasks",
                                          style: TextStyle(
                                             color: Color(0xD0000000),
                                             fontSize: 15,
                                            ),
                                        ),
                                        SizedBox(height: 10),
                                        Text(
                                          "${tasks[index].title}",
                                          style: TextStyle(
                                            color: Color(0xD0000000),
                                            fontSize: 24,
                                          ),
                                        ),
                                        SizedBox(height: 10),
                                        LinearProgressIndicator(
                                          value: tasks[index].percentage,
                                          backgroundColor: Color(0x300000FF),
                                        )
                                      ],
                                  ),
                                ),
                              ),
                            ],
                          ),
                        ),
                      ),
                    ),
                  );
                },
              )

这个实现的结果是这样的:

如果您想更改卡片的偏移量，则需要将值 viewportFraction: 0.8 修改为您想要的任何值。 1.0 是没有偏移的值。

您可以找到我对此的完整实现 Gist Github