删除轮播图像之间的边距

Question

为什么这个 Flutter 轮播中的图像之间有垂直边缘线？ 当我滑动旋转木马时，线条会闪烁。

此错误发生在设备（Nokia 7 Plus）上，而不是模拟器上。

import 'package:carousel_slider/carousel_slider.dart';
import 'package:flutter/material.dart';

main() {
  runApp(
    MaterialApp(
      home: Scaffold(
        appBar: AppBar(),
        body: ListView(
          children: [
            Text('Test'),
            CarouselSlider(
              options: CarouselOptions(
                aspectRatio: 1.8,
              ),
              items: List.generate(5, ((i) {
                return Container(
                  color: Colors.grey[200],
                  child: Column(
                    children: [
                      Image.network(
                        'http://picsum.photos/id/$i/400/200',
                      ),
                      Text('TEST'),
                    ],
                  ),
                );
              })),
            ),
          ],
        ),
      ),
    ),
  );
}

我有什么：

我想要什么：

Answer 1

我从容器边界遇到的问题。因此，如果您在顶部小部件上使用容器，它将具有填充并会得到这个。在这种情况下处理 Stack 小部件会更容易。

CarouselSlider(
  options: CarouselOptions(
    aspectRatio: 1.8,
    viewportFraction: .4,
    clipBehavior: Clip.none,
  ),
  items: List.generate(5, ((i) {
    return itemBUild(i);
  })),
),

和项目构建

Widget itemBUild(int id) {
  return Stack(
    fit: StackFit.expand,
    children: [
      // Image.network(
      //   'http://picsum.photos/id/$i/400/200',
      // ),
      Positioned.fill(
        child: Container(
          decoration: BoxDecoration(
              color: Colors.red, border: Border.all(color: Colors.red)),
        ),
      ),
      Positioned(
        bottom: 0,
        left: 0,
        right: 0,
        child: Container(
          color: Colors.green,
          child: Text('TEST', textAlign: TextAlign.center,),
        ),
      ),
    ],
  );
}

Answer 2

使用对齐设置宽度系数可以消除图像之间的距离。

像下面这样重新格式化可能会得到您期望的结果。

您使用的图片链接似乎不再存在，所以我使用了具有知识共享许可的图片链接（链接应该可以长期使用）。

import 'package:carousel_slider/carousel_slider.dart';
import 'package:flutter/material.dart';

main() {
  runApp(
    MaterialApp(
      home: Scaffold(
        appBar: AppBar(),
        body: 
        Align( widthFactor: 1, 
          child: ListView(
            children: [
              Text('Test'),
              CarouselSlider(
                options: CarouselOptions(
                  aspectRatio: 1.8, viewportFraction: .4,  disableCenter: true,
                  enableInfiniteScroll: false, animateToClosest: true,
                  padEnds: false, autoPlay: false, clipBehavior: Clip.none,
                ),
                items: List.generate(5, ((i) {
                  return Container(
                    color: Colors.grey[200],
                    child: Column(
                      children: [
                        Image.network(
                          'https://upload.wikimedia.org/wikipedia/commons/thumb/d/d4/Girl_with_laptop_open_in_front_of_her.jpg/320px-Girl_with_laptop_open_in_front_of_her.jpg',
                        ),
                        Text('TEST'),
                      ],
                    ),
                  );
                })),
              ),
            ],
          ),
        ),
      ),
    ),
  );
}