寻呼机指示器抖动

Question

我正在使用page_indicator: ^0.1.3插件显示页面浏览量指示器。

PageIndicatorContainer(
          pageView: PageView.builder(
            controller: PageController(),
            itemBuilder: (context, position) {
         );
            },
            scrollDirection: Axis.horizontal,
            itemCount: widgetView.widgetItemList.length,
          ),
          align: IndicatorAlign.bottom,
          length: widgetView.widgetItemList.length,
          indicatorColor: Colors.white,
          indicatorSelectorColor: Colors.grey,
          size: 5.0,
          indicatorSpace: 10.0,
      ))

但是它在图像上方显示指示器。

  

我没有找到任何选项或插件来设置图像下方的指示器   喜欢

Answer 1

PageIndicatorContainer 似乎没有可以在 PageView 之外设置指示器的属性。这种情况的解决方法是在 PageView 的页面上添加填充。

完整样本

import 'package:flutter/material.dart';
import 'package:page_indicator/page_indicator.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  PageController controller;
  GlobalKey<PageContainerState> key = GlobalKey();

  @override
  void initState() {
    super.initState();
    controller = PageController();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Column(
        children: [
          Flexible(
            flex: 5,
            child: PageIndicatorContainer(
              key: key,
              child: PageView.builder(itemCount: 4,itemBuilder: (context, position) {
                return Container(
                  // Padding will help prevent overlap on the page indicator
                  padding: EdgeInsets.fromLTRB(5, 5, 5, 30),
                  child: Container(
                    color: Colors.greenAccent,
                    child: Center(child: Text('${position + 1}')),
                  ),
                );
              }),
              align: IndicatorAlign.bottom,
              length: 4,
              indicatorSpace: 20.0,
              padding: const EdgeInsets.all(10),
              indicatorColor: Colors.grey,
              indicatorSelectorColor: Colors.blue,
              shape: IndicatorShape.circle(size: 12),
            ),
          ),
          Flexible(flex: 1, child: Container()),
          Flexible(
              flex: 5,
              child: Container(
                color: Colors.cyan,
              ))
        ],
      ),
    );
  }
}