Flutter PageView删除页面指示器

时间:2019-12-18 15:32:00

标签: flutter dart flutter-pageview

有没有人知道在我更改页面后的几秒钟内是否可以删除显示的PageView指示器?

enter image description here

    return Scaffold(
      bottomNavigationBar: CubertoBottomBar(
        tabStyle: CubertoTabStyle.STYLE_FADED_BACKGROUND,
        selectedTab: _selectedIndex, 
        tabs: [
          TabData(
            iconData: Icons.assignment,
            title: "Logbuch",
            tabColor: Colors.deepPurple,
          ),
         ....
        ],
        onTabChangedListener: (position, title, color) {
          setState(() {
            _selectedIndex = position;
          });
        },
      ),
      body: PageView(
        controller: _pageController,
        pageSnapping: true,
        onPageChanged: (index) {
          setState(() {
            _selectedIndex = index;
          });
        },
        // physics: NeverScrollableScrollPhysics(),
        children: <Widget>[
          LogBookView(),
         ...
        ],
      ),
    );

在PageView小部件和BottomNav小部件的文档中找不到任何相关信息。

2 个答案:

答案 0 :(得分:1)

我认为您需要为代码提供一些上下文,因为有很多实现PageView和indicator的方法。我认为您使用TabBarView作为PageView的父级,因为默认情况下,PageView本身没有指示器,而TabBarView却具有指示器。

假设我是对的,除非您要使用不同的选项卡,并且每个选项卡具有不同的PageView或其他小部件,否则您确实不需要使用TabBarView。判断您的UI我认为带控制器的PageView可以满足您的UI需求。

Class XYZ extends StatefullWidget{
.......
}
Class _XYZ extends State<XYZ>
    with SingleTickerProviderStateMixin{

PageController _pageController;
int pageNumber = 0;

void initState() {
  super.initState();

    _pageController = PageController();
  }
..................
//inside build PageView
PageView(
  controller: _pageController,
  onPageChanged: (pageIndex) {
     setState(() {
       pageNumber = pageIndex;
     });
   },
   children: <Widget>[
         Notes(), // scaffold or widget or other class
         Wochenplan(), scaffold or widget or other class
         ETC(), // scaffold or widget or other class
   ],
),
..................
//inside build bottom nav icons
Row(
   children: <Widget>[
         buildTabButton(int currentIndex, int pageNumber, String image), 
         buildTabButton2...., 
         buildTabButton3...,
   ],
)
.......

buildTabButton1........

buildTabButton2(int currentIndex, int pageNumber, String image) {
    return AnimatedContainer(
      height: _height,
      width: currentIndex == pageNumber ? 100 : 30,
      padding: EdgeInsets.all(10),
      duration: Duration(milliseconds: 300),
      decoration: BoxDecoration(),// use currentIndex == pageNumber to decorate current widget and others
      child: ../*ClickableWidget*/, //onClckWochenplan() // and so on  
    );
}

buildTabButton3........


........................
//onPressed or onTap functions which you can implement inside widgets as well.. 
void ABC() {
    _pageController.animateToPage(0,
        duration: Duration(milliseconds: 500), curve: Curves.decelerate);
}

void onClckWochenplan() {
    _pageController.animateToPage(1,
        duration: Duration(milliseconds: 500), curve: Curves.decelerate);
}

void DEF() {
    _pageController.animateToPage(2,
        duration: Duration(milliseconds: 500), curve: Curves.decelerate);
}

我希望它会有所帮助..另外提供一些代码以获取社区的帮助..欢呼

答案 1 :(得分:0)

我看到您正在使用库CubertoBottomBar,它不是flutter提供的默认TabBarView。所以我看了看图书馆。问题是,它根本不应该显示该指标。因此,我将在这里进行2个疯狂的猜测和1个建议。 1.您可能还有另一个父母使用TabBarView包裹了这个支架(可能来自包裹该支架的上一课/小部件)。

 Scaffold(
      bottomNavigationBar: CubertoBottomBar(
        tabStyle: CubertoTabStyle.STYLE_FADED_BACKGROUND,
        selectedTab: _selectedIndex, 
        tabs: [
..............

  1. 如果在IOS上构建它,则可能无法正确呈现库窗口小部件。 (这是因为我试图以与您相同的方式构建此应用程序,而我的3台设备完全没有任何指示)。因此,如果您当前正在IOS上构建它,请尝试在android设备上构建它,然后您可能会知道真正发生了什么,并向库所有者报告问题。

  2. 除了无法为您提供帮助之外,我建议您尝试用TabBar替换PageView,然后您可以控制指示器(尽管PageView既不应该为您提供指示器,也可以作为建议)。 p>

TabBar(
  indicatorWeight: 0.0, // then you can control height of indicator
  indicatorColor: Colors.transparent, // then you can control color with transparent value
  tabs: <Widget>[
       tab();
       tab2();
  ],            
),

// **待办事项----------------------

我的赌注在我的第一点。.彻底检查小部件树...