Блог

Мне нужно реализовать список горизонтальной прокрутки во flutter.Я мог бы это сделать и включил приведенный ниже код (код еще предстоит доработать, но основа кода достаточно хороша, чтобы вставить картинки и другие подобные детали).

Но проблема заключается в минусовой полоске под горизонтальной прокруткой.Я не знаю, какая функция во 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,
              ),

            ],
          ),
       )
    );
  }
}
  

То, что вы хотите найти, не 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(),
      ],
    );
  }
}