如何在页面浏览中包含两个项目作为页面主要内容 -- Flutter

Question

是否可以使用PageView达到以下工作？

我想使用两个容器作为 PageView 页面的主要内容。

我已经尝试调整 viewPortFraction 但它没有像我预期的那样工作。

以下效果被Apple App store和Prime Video以及许多应用程序使用。

谢谢。

Answer 1

您可以不使用 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,
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}

希望这能让你入门。

Answer 2

您可以尝试在 physics 参数中使用带有 PageScrollPhysics() 的水平 ListView。

Answer 3

您可以在 PageController;

中使用 viewportFraction 参数

如何在页面浏览中包含两个项目作为页面主要内容 -- Flutter

How to include two items as a page main content in pageview -- Flutter

dart

hybrid-mobile-app

flutter

flutter-pageview