Как создать расширяемый / сокращаемый горизонтальный ListView? - PullRequest
Новая
       110

Как создать расширяемый / сокращаемый горизонтальный ListView?

1 голос
/ 04 апреля 2020

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

Я хочу добиться пользовательского интерфейса примерно так.

enter image description here

1 Ответ

2 голосов
/ 04 апреля 2020

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

return Scaffold(
  body: CustomScrollView(
    slivers: <Widget>[
      SliverAppBar(
        expandedHeight: 300,
        centerTitle: true,
        pinned: true,
        elevation: 4,
        floating: true,
        title: Text(
          'Subscribe Now',
          style: TextStyle(color: Colors.white),
        ),
        flexibleSpace: FlexibleSpaceBar(
          titlePadding: const EdgeInsets.all(0),
          collapseMode: CollapseMode.pin,
          background: ListView.builder(
              scrollDirection: Axis.horizontal,
              itemCount: 4,
              itemBuilder: (BuildContext context, int index) {
                return Container(
                  color: Colors.indigoAccent,
                  margin: EdgeInsets.only(left: 20, bottom: 16, top: 180),
                  child: SizedBox(
                    height: 100,
                    width: 100,
                    child: Center(
                      child: Text('Item No. $index'),
                    ),
                  ),
                );
              }),
        ),
      ),
      SliverList(
        delegate:
            SliverChildBuilderDelegate((BuildContext context, int index) {
          return Container(
            margin: const EdgeInsets.fromLTRB(16, 8, 16, 12),
            decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(10),
              color: Colors.black,
            ),
            padding: const EdgeInsets.all(22),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: <Widget>[
                Text(
                  'Get 7 days free',
                  style: Theme.of(context)
                      .textTheme
                      .headline
                      .copyWith(color: Colors.white),
                ),
                const SizedBox(
                  height: 2,
                ),
                Text(
                  'Save 50% off',
                  style: Theme.of(context)
                      .textTheme
                      .button
                      .copyWith(color: Colors.greenAccent),
                ),
                const SizedBox(
                  height: 6,
                ),
                Text(
                  '\$60',
                  style: Theme.of(context).textTheme.headline.copyWith(
                      fontWeight: FontWeight.w700,
                      color: Colors.white,
                      fontSize: 28),
                )
              ],
            ),
          );
        }, childCount: 10),
      )
    ],
  ),
);
...