交换小部件以使小部件已固定

Question

我有一个带有Carouselslider的创建非常简单的滑动视图Pager：

return Scaffold(
    body: CarouselSlider(
  options: CarouselOptions(
    viewportFraction: 1,
    // aspectRatio: 1,
    height: double.maxFinite,
    // enlargeCenterPage: true,
  ),
  items: List.generate(
      10,
      (i) => Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Expanded(
                child: Container(
                  color: (i % 2 == 0) ? Colors.red : Colors.green,
                ),
              ),
              Text('text $i', style: TextStyle(fontSize: 16.0)),
            ],
          )),
));

这是其结果：

，

但是您可以看到下一个容器连接到第一个小部件，我希望当第一个窗口部门在左边交换时， ，下一个小部件出现在第一个小部件下面，而不是旁边的第一个小部件。看起来以下小部件已固定，我们删除了顶部的小部件。

Answer 1

您可以使用称为 pageview 在使用中。

示例snippet：

PageView.builder(
  itemCount: 10,
  scrollDirection: Axis.vertical,
  controller: pageController,
  itemBuilder: (context, index) {
    return StackPageView(
      controller: pageController,
      index: index,
      child: Container(
        color: (colors..shuffle()).first,
        child: Center(
          child: Text(
            '$index',
            style: TextStyle(
              color: Colors.white,
              fontSize: 25,
            ),
          ),
        ),
      ),
    );
  },
)

注意：您可以使用属性 scroldirection 内部 pageview.builder（）内部控制滚动轴。具有 axis.vertical 或 axis.horizo​​ntal 的值。

Answer 2

我终于找到了一种创建堆栈页面视图的方法，这是一个完整的代码：

import 'package:flutter/src/foundation/key.dart';
import 'package:flutter/src/widgets/framework.dart';

import 'package:flutter/material.dart';

import 'dummy_data.dart';
import 'page_view_item.dart';
class HomePage extends StatefulWidget {
  const HomePage({Key? key}) : super(key: key);

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {

  /// The current page of the page view
   double _page = 0;

  /// The index of the leftmost element of the list to be displayed
  int get _firstItemIndex => _page.toInt();

  /// Controller to get the current position of the page view
  final _controller = PageController(
    viewportFraction: 0.5,
  );

  /// The width of a single item
  late final _itemWidth =
      MediaQuery.of(context).size.width * _controller.viewportFraction;

@override
  void initState() {
    super.initState();
    _controller.addListener(() => setState(() {
          _page = _controller.page!;
        }));
  }
   @override
  void dispose() {
    super.dispose();
  }
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("LV Scroll"),
      
      ),
      body: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          
          Stack(
          children: [
            Positioned.fill(
              child: Align(
                alignment: Alignment.centerLeft,
                child: SizedBox(
                  width: _itemWidth,
                  child: FractionallySizedBox(

                    child: PageViewItem(
                      index: _firstItemIndex,
                      width: _itemWidth,
                      url: model[_firstItemIndex],

                    ),
                  ),
                ),
              ),
            ),
            SizedBox(
              height: 250,
              child: PageView.builder(
                padEnds: false,
                controller: _controller,
                itemBuilder: (context, index) {
                  return Opacity(
                    opacity: index <= _firstItemIndex ? 0 : 1,
                    child: PageViewItem(
                      index: index,

                      width: _itemWidth,
                      url: model[index],

                    ),
                  );
                },
                itemCount: model.length,
              ),
            ),
          ],
    ),
        ],
      ),
    );
  }

}

是结果：

及其参考;

Answer 3

您可以使用一个称为 pageView 相同的参数。

ExpandablePageView.builder(
  itemCount: 3,
  itemBuilder: (context, index) {
    return Container(color: Colors.blue);
  },
),