Question

我正在尝试达到示例中的结果。我需要对项目进行水平滚动。此外，滚动时所选列表项始终居中。我尝试使用TabBar，但它选择的项目始终会更改位置。例： https://i.stack.imgur.com/M153Z.jpg

Answer 1

这是示例，请根据需要进行修改！

首先，您需要将标题页控制器的视口比例指定为.05

final titleController = PageController(viewportFraction: 0.5);
final contentController = PageController();

在initState方法中，将控制器添加到contentController

contentController.addListener(() {
  setState(() {
    titleController.animateToPage(contentController.page,Duration(milliseconds:100));
  });
});

然后将两个网页浏览量添加到列

Column(
  children: <Widget>[
    Container(
      height:100.0
      child: PageView(
          controller: titleController,
          children: <Widget>[
           Text('Title 1'),
           Text('Title 2'),
           //more....
         ]
      )
   ),
   PageView(
          controller: contentController,
          children: <Widget>[
           Page1
           Page2
           //more....
         ]
      )
  ],
)

Answer 2

从您提供的详细信息来看，我认为您需要这样做。这也是一个水平滚动，同时弹出并选择了中心项目。

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

/// circular images pageview
class CircularImagesPageView extends StatefulWidget {
  /// constructor
  const CircularImagesPageView(
      {this.scaleFraction = 0.7,
      this.fullScale = 1.0,
      this.pagerHeight = 200.0,
      this.currentPage = 2,
      this.students,
      this.indexChanged});
  @override
  _CircularImagesPageViewState createState() => _CircularImagesPageViewState();

  /// scale fraction
  final double scaleFraction;

  /// full scale
  final double fullScale;

  /// pager height
  final double pagerHeight;

  /// current page
  final int currentPage;

  /// list students
  final List<Map<String, String>> students;

  /// index changed
  final Function(int index) indexChanged;
}

class _CircularImagesPageViewState extends State<CircularImagesPageView> {
  // control parameters
  final double _viewPortFraction = 0.5;
  PageController _pageController;
  int _currentPage = 2;
  double _page = 0.0;

  @override
  void initState() {
    _currentPage = widget.currentPage;
    _page = _currentPage.toDouble();
    _pageController = PageController(
        initialPage: _currentPage, viewportFraction: _viewPortFraction);
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return ListView(
      physics: const NeverScrollableScrollPhysics(),
      children: <Widget>[
        const SizedBox(
            // height: 20,
            ),
        Container(
          height: widget.pagerHeight,
          child: NotificationListener<ScrollNotification>(
            onNotification: (ScrollNotification notification) {
              if (notification is ScrollUpdateNotification) {
                setState(() {
                  _page = _pageController.page;
                });
              }

              return true;
            },
            child: PageView.builder(
              onPageChanged: (int pos) {
                setState(() {
                  _currentPage = pos;
                  widget.indexChanged(pos);
                });
              },
              physics: const BouncingScrollPhysics(),
              controller: _pageController,
              itemCount: widget.students.length,
              itemBuilder: (BuildContext context, int index) {
                final double scale = max(
                    widget.scaleFraction,
                    (widget.fullScale - (index - _page).abs()) +
                        _viewPortFraction);
                return circleOffer(widget.students[index]['image'], scale);
              },
            ),
          ),
        ),

      ],
    );
  }

  Widget circleOffer(String image, double scale) {
    return Align(
      alignment: Alignment.bottomCenter,
      child: Container(
        margin: const EdgeInsets.only(bottom: 10),
        height: widget.pagerHeight * scale,
        width: widget.pagerHeight * scale,
        child: Card(
          elevation: 4,
          clipBehavior: Clip.antiAlias,
          shape: CircleBorder(
              side: BorderSide(color: Colors.grey.shade200, width: 5)),
          child: Padding(
            padding: const EdgeInsets.all(10.0),
            child: image == null
                ? Image.asset(
                    assetName: IMAGE_USER_AVATAR,
                    fit: BoxFit.contain,
                  )
                : Image.network(
                    image,
                    fit: BoxFit.cover,
                  ),
          ),
        ),
      ),
    );
  }
}

只需在代码中使用此小部件即可。

Container(
        height: MediaQuery.of(context).size.height * 0.25,
        width: double.infinity,
        child: CircularImagesPageView(
        pagerHeight:
        MediaQuery.of(context).size.height * 0.25,
        students: _childrenList,
        currentPage: _selectedChildIndex,
        indexChanged: (int index) {
           setState(() {
              _selectedChildIndex = index;
                  _reloadHistoryList = true;
            });
         },
   )

有没有办法对居中的所选项目进行水平滚动？

2 个答案: