Question

我必须在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,
              ),
              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(),
      ],
    );
  }
}

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

1 个答案: