Flutter 交换小部件，以便修复下方小部件

发布于06月11日

我有一个使用旋转滑轨创建如此简单的可滑动视图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)),
            ],
          )),
));

其结果如下:

但正如您所看到的，下一个容器连接到第一个小部件，我希望当第一个小部件被交换到左侧时，下一个小部件出现在第一个小部件下，而不是它旁边.看起来下面的小部件已经修复，我们删除了顶部的小部件.

推荐答案

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

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,
              ),
            ),
          ],
    ),
        ],
      ),
    );
  }

}

结果是: