Как я могу получить этот результат пользовательского интерфейса? - PullRequest
Новая
       40

Как я могу получить этот результат пользовательского интерфейса?

0 голосов
/ 25 июня 2019

Я пытался воссоздать концепцию дизайна от этого парня (https://dribbble.com/shots/3812962-iPhone-X-Todo-Concept), но у меня возникли некоторые проблемы с выравниванием ListView, или я так думаю. То, что я пытаюсь сделать, это переместить Список впрямо, не обрезая края карточек при смахивании.

Я уже пробовал с полем и отступом, но ничего из этого, примененного к контейнеру, не дает результатов, которые я хочу получить. Края обрезаются при смахивании.

Я оставляю здесь Контейнер с ListView внутри него.

Снимки экрана реального приложения: 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();
                      });
                },
              ),
            ),

Я пытаюсь переместитьСоставьте список справа, не обрезая края карточек, когда я проведу пальцем.

1 Ответ

0 голосов
/ 25 июня 2019

Для достижения этой цели вам нужно PageView вместо ListView, чтобы вы могли смахивать и «привязывать» виды при достижении определенной позиции: 

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),
                                        )
                                      ],
                                  ),
                                ),
                              ),
                            ],
                          ),
                        ),
                      ),
                    ),
                  );
                },
              )

Результатэта реализация выглядит примерно так:

PageView

Если вы хотите изменить смещение карт, вам нужно изменить значение viewportFraction: 0.8 на любоеТы бы хотел.1.0 - это значение без смещения.

Вы можете найти мою полную реализацию над этим Gist Github

...