[FLUTTER]滚动更改选项卡 [英] [FLUTTER]Scroll changes tabs

问题描述

我想构建这个 UI，其中标签在某些滚动点上发生变化.请告诉我应该如何处理，是否有可用的包?

I want to build this UI where the tabs changes on certain scroll-point.Please tell how should I approach,is there any package already available?

用户界面链接:

https://www.youtube.com/watch?v=LrOR5QOCHBI

推荐答案

检查这个你会知道该怎么做https://dartpad.dev/a1d76ac8c733a492995538730d0fc2df

Check this you will get an idea what to do https://dartpad.dev/a1d76ac8c733a492995538730d0fc2df

基本上我创建了一个可以跟踪当前选项卡的行.现在列表视图具有固定大小的元素.现在滚动我们计算应该突出显示哪个标签.

Basically i have created a row which can track current tab. Now the list view has element of fixed size. Now on scroll we calculate which tab should be highlited.

    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: Center(
          child: MyWidget(),
        ),
      ),
    );
  }
}

class MyWidget extends StatefulWidget {
  const MyWidget({ Key key }) : super(key: key);

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

class _MyWidgetState extends State<MyWidget> {
  int currTab=0;
  ScrollController _scrollController;
  
  @override
void initState() {
  super.initState();
  _scrollController = ScrollController()
    ..addListener(() {
      //print("offset = ${_scrollController.offset}");
       currTab=(_scrollController.offset)~/(100*30);
      print(currTab);
      setState(() {
        
      });
       
  });
}
  

  @override
void dispose() {
  _scrollController.dispose(); // it is a good practice to dispose the controller
  super.dispose();
}
  
  
  @override
  Widget build(BuildContext context) {
    return 
      
      Column(
    
    children: <Widget>[
      Row(
              children: <Widget>[
                for(int i=0;i<5;i++)
                  Container(
                    decoration: new BoxDecoration(
              color:  i==currTab?Colors.red:Colors.blue,
              borderRadius: new BorderRadius.all(Radius.circular(10.0)
              )),
                    width: 100, child: Text("Tab "+i.toString(),style: TextStyle(color: Colors.white),textAlign: TextAlign.center,))
              ],
              
              ),
      Expanded(
        child: ListView(
    controller: _scrollController, 
    children: <Widget>[
      for(int i=0;i<100;i++)
              Container(height: 30, child: Text("Conten at 0 -"+ i.toString())),
            for(int i=0;i<100;i++)
              Container(height: 30, child: Text("Conten at 1 -"+ i.toString())),
            for(int i=0;i<100;i++)
              Container(height: 30, child: Text("Conten at 2 -"+ i.toString())),
            for(int i=0;i<100;i++)
              Container(height: 30, child: Text("Conten at 3 -"+ i.toString())),
            for(int i=0;i<100;i++)
              Container(height: 30, child: Text("Conten at 4 -"+ i.toString())),
    ],
  )
      ),
       
    ],)
       ;
  }
}

或者只使用 LIB:scrollable_list_tabview

https://pub.dev/packages/scrollable_list_tabview

ScrollableListTabView(
    tabHeight: 48,
    tabs: [
      ScrollableListTab(
          tab: ListTab(label: Text('Label 1'), icon: Icon(Icons.group)),
          body: ListView.builder(
            shrinkWrap: true,
            physics: NeverScrollableScrollPhysics(),
            itemCount: 10,
            itemBuilder: (_, index) => ListTile(
              leading: Container(
                height: 40,
                width: 40,
                decoration: BoxDecoration(
                    shape: BoxShape.circle, color: Colors.grey),
                alignment: Alignment.center,
                child: Text(index.toString()),
              ),
              title: Text('List element $index'),
            ),
          )),
    ],
  ),
);

这篇关于[FLUTTER]滚动更改选项卡的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！