Question

我正在使用PageView.builder创建页面。

PageView.builder(
          itemCount: _pagesList.length,
          itemBuilder: (BuildContext context, int index) {
            return Container( 
                    color: _pagesList[index],
                           );
                          }
                         )

我目前拥有的东西：

我想要什么：

即我想在页面之间（滚动时）提供一些Padding

原因：：我将在这些页面中显示图像，并且由于图像将覆盖每一页的整个宽度，因此当我们滚动页面时，由于它们是编织在一起的，因此看起来并不好看，像这样：

我该如何解决？

Answer 1

PageController imagesController =
        PageController(initialPage: 0, viewportFraction: 1.1);

PageView(
    itemBuilder: (BuildContext context, int index) {
     return Padding(
      padding: EdgeInsets.only(left: 10, right: 10),
        child: Container( 
            color: _pagesList[index],
        ),
     );
  }
),

Answer 2

尽力而为：

    org.apache.spark.SparkException: Job aborted.
    at org.apache.spark.sql.execution.datasources.FileFormatWriter$.write(FileFormatWriter.scala:196)
    Caused by: org.apache.spark.SparkException: Task not serializable
    at org.apache.spark.util.ClosureCleaner$.ensureSerializable(ClosureCleaner.scala:403)
    Caused by: java.io.NotSerializableException: com.fasterxml.jackson.module.paranamer.shaded.CachingParanamer
Serialization stack:
    - object not serializable (class: com.fasterxml.jackson.module.paranamer.shaded.CachingParanamer, value: com.fasterxml.jackson.module.paranamer.shaded.CachingParanamer@660424b3)
    - field (class: com.fasterxml.jackson.module.paranamer.ParanamerAnnotationIntrospector, name: _paranamer, type: interface com.fasterxml.jackson.module.paranamer.shaded.Paranamer)

Answer 3

您只需要在每个页面周围添加一些填充，并且页面视图的宽度必须至少为“卡片宽度 + 两侧的填充”。这对我有用：

class MyWidget extends StatelessWidget {
  final _CARD_WIDTH = 220.0;
  final PageController _controller = PageController(initialPage: 0);
  
  @override
  Widget build(BuildContext context) {
    
    return Container(
            height: _CARD_WIDTH,
            width: _CARD_WIDTH + 32,
            child: PageView(
              scrollDirection: Axis.horizontal,
              controller: _controller,
              children: <Widget>[
                _buildImageCard("1"),
                _buildImageCard("2"),
                _buildImageCard("3"),
              ],
            ),
          );
  }
  
  Widget _buildImageCard(String text) {
    return Padding(
      padding: const EdgeInsets.only(left: 16.0, right: 16),
      child: Container(
        decoration: BoxDecoration(
          color: Colors.blue,
          borderRadius: BorderRadius.circular(15),
        ),
        width: _CARD_WIDTH,
        height: _CARD_WIDTH,
        child: Center(
          child: Text(text),
        ),
      ),
    );
  }
}

如何在PageView中的页面之间留出一些空间（边距/填充）？

3 个答案: