时间戳

首页 > 解决方案 > 如何在颤动中实现由底部减号栏控制的水平滚动

flutter - 如何在颤动中实现由底部减号栏控制的水平滚动

问题描述

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

但问题是水平滚动下方的减号栏。我不知道颤振中的哪些功能可以做到这一点。我搜索了很多东西，但除了单选框、复选框、开关等我找不到任何细节的它。请看一下应用程序的屏幕截图，我已将减号栏控件标为红色。主屏幕，减号栏显示为红色

我写的代码：

@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,
              ),

            ],
          ),
       )
    );
  }
}

标签： flutterlistviewdartcontrols

解决方案

您想要寻找的不是ListView，但PageView这里有一个小代码示例，可以在DartPad中尝试，看看如何制作布局。

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

代码

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(),
      ],
    );
  }
}

推荐阅读