Flutter 有没有办法用居中的选定项进行水平滚动？

我正在努力实现示例中的结果。我需要做一个项目选择水平滚动。此外，滚动时所选列表项始终居中。我尝试使用TabBar，但它始终更改选定项的位置。 例子：

---

这是一个示例，请根据需要修改它

首先，需要使用.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....
         ]
      )
  ],
)

列(
儿童：[
容器(
身高：100.0
子：页面视图(
控制器：标题控制器，
儿童：[
正文（“标题1”），
正文（“标题2”），
//更多。。。。
]
)
),
页面浏览(
控制器：contentController，
儿童：[
第1页
第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;
            });
         },
   )