Как включить два элемента в качестве основного содержимого страницы в просмотре страницы - Flutter

Question

Можно ли использовать PageView для выполнения следующей работы?

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

I Я пытался настроить viewPortFraction, но он не работает так, как я ожидал.

Следующий эффект используется Apple App store и Prime Video и многими приложениями.

Спасибо.

Answer 1

Вы можете попробовать использовать горизонтальный ListView с PageScrollPhysics() В параметре physics.

Answer 2

Вместо использования PageView вы можете просто использовать ListView с

scrollDirection: Axis.horizontal

Таким образом, вы можете достичь того же результата. Вам нужно как-то предоставить явную высоту для вашего ListView, если я не ошибаюсь.

Ниже приведен рабочий пример.

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Example'),
      ),
      body: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          Padding(
            padding: const EdgeInsets.all(8.0),
            child: Text(
              "Top Games",
              style: TextStyle(fontWeight: FontWeight.bold, fontSize: 18),
            ),
          ),
          Container(
            height: 200,
            child: ListView(
              scrollDirection: Axis.horizontal,
              children: <Widget>[
                GameCard(
                  "The Game 1",
                  "A puzzle game",
                  "https://lorempixel.com/200/200/abstract/",
                ),
                GameCard(
                  "The Game 2",
                  "An even beter game",
                  "https://lorempixel.com/200/200/sports/2/",
                ),
                GameCard(
                  "SportMania",
                  "Editors Choice",
                  "https://lorempixel.com/200/200/sports/3/",
                ),
                GameCard(
                  "MonkeySports",
                  "Monkeys playing Sport",
                  "https://lorempixel.com/200/200/abstract",
                ),
              ],
            ),
          )
        ],
      ),
    );
  }
}

class GameCard extends StatelessWidget {
  final String gameTitle;
  final String gameDescr;
  final String imgUrl;
  GameCard(
    this.gameTitle,
    this.gameDescr,
    this.imgUrl,
  );

  @override
  Widget build(BuildContext context) {
    return Card(
      elevation: 3,
      shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(10)),
      margin: EdgeInsets.all(5),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.center,
        children: <Widget>[
          ClipRRect(
            borderRadius: BorderRadius.circular(10),
            child: Image.network(
              imgUrl,
              width: 180,
              height: 130,
              fit: BoxFit.cover,
              alignment: Alignment.center,
            ),
          ),
          Container(
            padding: EdgeInsets.all(4),
            width: 180,
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: <Widget>[
                Text(
                  gameTitle,
                  maxLines: 2,
                  style: TextStyle(fontWeight: FontWeight.bold),
                ),
                Text(
                  gameDescr,
                  maxLines: 2,
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}

Надеюсь, это поможет вам начать.