如何实现由颤动中的底部负条控制的水平滚动

问题描述

我必须在Flutter中实现一个水平滚动列表，我可以做到这一点并包含下面的代码（该代码仍需修改，但代码的基础足以放入图片和其他此类细节中） ）

但是问题是水平滚动条下方的减号栏。我不知道颤振的功能允许这样做。我搜索了很多东西，除了单选框，复选框，开关等之外，我无法找到它的任何详细信息。请查看应用程序的屏幕截图，我已将减号控件表示为红色。Home screen,the minus bar indicated in red

我编写的代码：

@override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.black,body: Container(
         margin: EdgeInsets.symmetric(vertical: 20.0),height: 500,child: ListView(
            // This next line does the trick.
            scrollDirection: Axis.horizontal,shrinkWrap: true,children: <Widget>[
              Container(
                width:400,color: Colors.red,),Container(
                width: 400.0,color: Colors.blue,color: Colors.green,],)
    );
  }
}

解决方法

您要查找的不是ListView，而是PageView，这是一个小代码示例，可以在DartPad中尝试并查看如何进行布局。

基本上，我使用PageController来通过点击某些小部件来更改当前页面。

代码

import 'package:flutter/material.dart';

final Color darkBlue = Color.fromARGB(255,18,32,47);

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.dark().copyWith(scaffoldBackgroundColor: darkBlue),debugShowCheckedModeBanner: false,home: Scaffold(body: MyWidget()),);
  }
}

class MyWidget extends StatefulWidget {
  @override
  _MyWidgetState createState() => _MyWidgetState();
}

class _MyWidgetState extends State<MyWidget> {
  final _items = [Colors.red,Colors.blue,Colors.yellow];
  final _pageController = PageController();
  
  int _currentPageNotifier = 0;

  final double _indicatorWidth = 30;

  Widget _buildPageView() {
    return PageView.builder(
      controller: _pageController,itemCount: _items.length,itemBuilder: (context,index) => Center(
        child: FlutterLogo(
          colors: _items[index],size: 50,),onPageChanged: (int index) =>
          setState(() => _currentPageNotifier = index),);
  }

  Widget _buildIndicator() {
    List<Widget> itemWidgets = [];
    for (int index = 0; index < _items.length; index++) {
      itemWidgets.add(GestureDetector(
        onTap: () => _pageController.animateToPage(
          index,duration: Duration(milliseconds: 300),curve: Curves.ease,child: Container(
          decoration: BoxDecoration(
            color: _currentPageNotifier == index
                ? Colors.green
                : Colors.grey,borderRadius: BorderRadius.circular(9),margin: EdgeInsets.only(right: 10),width: _indicatorWidth,height: 8,));
    }
    return Positioned(
      bottom: MediaQuery.of(context).size.height / 2 - 50,left: MediaQuery.of(context).size.width / 2 -
          _items.length * _indicatorWidth +
          _items.length * 10,child: Row(
        mainAxisAlignment: MainAxisAlignment.center,children: itemWidgets,);
  }

  @override
  Widget build(BuildContext context) {
    return Stack(
      children: <Widget>[
        _buildPageView(),_buildIndicator(),],);
  }
}