如何实现由底部减号条控制的水平滚动

Question

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

但问题是水平下方的减号栏 scroll.I 不知道 flutter 中的哪些功能允许执行 that.I 搜索很多东西，但除了单选框，复选框，开关，等我找不到 it.Please 的任何详细信息，请查看应用程序的屏幕截图，我已将减号栏控件标为红色。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,
              ),
              Container(
                width: 400.0,
                color: Colors.green,
              ),

            ],
          ),
       )
    );
  }
}

Answer 1

您要寻找的不是 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(),
      ],
    );
  }
}

如何实现由底部减号条控制的水平滚动

How to implement a horizontal scroll which is controlled by bottom minus bar in flutter

controls

listview

dart

flutter