颤动轮播滑块可防止第一个元素滚动到中心

Question

我是flutter的新手，我想创建一个轮播，您可以水平滚动并且不会将元素捕捉到中心，我这样做了，但它的两侧有空白，我希望第一个元素从屏幕左侧开始，当我尝试滚动并将第一个元素移动到中心时，它保持在左侧，但是当我以其他方式滚动时，它会正常滚动，与最后一个元素相同，但粘在右侧而不是左侧。

这就是我所拥有的

这就是我想要的

Answer 1

轮播滑块没有任何属性可将元素中心设置为在左屏幕上启动，

如果您不想使用轮播滑块，那么您可以尝试这个演示：

import 'package:flutter/material.dart';

class ListviewSliderDemoScreen extends StatefulWidget {
  const ListviewSliderDemoScreen({Key? key}) : super(key: key);

  @override
  _ListviewSliderDemoScreenState createState() =>
      _ListviewSliderDemoScreenState();
}

class _ListviewSliderDemoScreenState extends State<ListviewSliderDemoScreen> {
  final List<String> imageUrls = [
    'https://images.unsplash.com/photo-1682687982134-2ac563b2228b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80',
    'https://images.unsplash.com/photo-1567790350645-dbc1486a89c3?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=880&q=80',
    'https://plus.unsplash.com/premium_photo-1681584471485-0d12b119d3db?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80',
    'https://images.unsplash.com/photo-1682685797332-e678a04f8a64?ixlib=rb-4.0.3&ixid=M3wxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80',
    'https://images.unsplash.com/photo-1682695794947-17061dc284dd?ixlib=rb-4.0.3&ixid=M3wxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80',
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Carousel Slider Demo'),
      ),
      body: Center(
        child: ListView.builder(
          itemCount: imageUrls.length,
          scrollDirection: Axis.horizontal,
          itemBuilder: (context, index) {
            return Column(
              children: [
                Container(
                  height: 150,
                  width: 200,
                  decoration:
                      BoxDecoration(borderRadius: BorderRadius.circular(10)),
                  child: Padding(
                    padding: const EdgeInsets.all(8.0),
                    child: ClipRRect(
                      borderRadius: BorderRadius.circular(10),
                      child: Image.network(
                        imageUrls[index],
                        fit: BoxFit.cover,
                      ),
                    ),
                  ),
                ),
              ],
            );
          },
        ),
      ),
    );
  }
}