fluttercandies / extended_tabs

A powerful official extension library of Tab/TabBar/TabView, which support to scroll ancestor or child Tabs when current is overscroll, and set scroll direction and cache extent.
https://fluttercandies.github.io/extended_tabs/
MIT License
271 stars 49 forks source link

[Discussions] ExtendedTabBarView 内 调用 Scrollable.ensureVisible 为什么会出现这种现象(看视频) #29

Closed giantss closed 1 year ago

giantss commented 1 year ago

Content

请看视频,我的预期,点击数字item时调用 demo 中的scrollToIdx 方法后,实现将某内容滚动到可见区域。alignmentPolicy: ScrollPositionAlignmentPolicy.explicit 配置时,发现点击 item后整个界面会向左动一下,然后回到再原位。请问一下怎么解决 @zmtzawqlp

https://github.com/fluttercandies/extended_tabs/assets/13778798/54ac2d01-5113-414d-b519-9bfc71284e9b

下面是一个能复现的demo:


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

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

  @override
  State<DemoView> createState() => _DemoViewState();
}

class _DemoViewState extends State<DemoView> with TickerProviderStateMixin{

  late TabController _controller;

  final List<GlobalKey> keys = <GlobalKey>[];
  @override
  void initState() {
    super.initState();
    _controller = TabController(
      initialIndex: 0,
      length: 10,
      vsync: this,
    );
    for(var i = 0; i < 10; i++){
      keys.add(GlobalKey());
    }
  }

  scrollToIdx(index){
    Scrollable.ensureVisible(
      keys[index].currentContext!,
      duration: const Duration(milliseconds: 500),
      alignmentPolicy: ScrollPositionAlignmentPolicy.explicit
    );
  }

  @override
  Widget build(BuildContext context) {

    return Scaffold(
      appBar: AppBar(
        title: Text("dddd"),
      ),
      body: Column(
        children: [
          ExtendedTabBar(
            tabs: List.generate(
                _controller.length,
                    (int index) => Tab(
                  text: 'Tab$index',
                )).toList(),
            controller: _controller,
            labelPadding: EdgeInsets.symmetric(horizontal: 30),
            labelColor: Colors.blue,
            isScrollable: _controller.length > 5,
            indicatorSize: TabBarIndicatorSize.tab,
            mainAxisAlignment: MainAxisAlignment.start,
            indicator: const ExtendedUnderlineTabIndicator(
//size: 31,
                insets: EdgeInsets.symmetric(horizontal: 30),
                borderSide: BorderSide(
                  color: Colors.red,
                  width: 1,
                )),
          ),
          Expanded(
              child:ExtendedTabBarView(
                children: [
                  Container(
                    color: Colors.white,
                    child: Column(
                      children: [
                        Container(
                          width: 200,
                          height: 200,
                          color: Colors.grey,
                          child: SingleChildScrollView(
                            child: Column(
                              children: [
                                for(int i=0; i<10; i++)
                                  InkWell(
                                    onTap: (){
                                      scrollToIdx(i+1);
                                    },
                                    child: Container(
                                      key: keys[i],
                                      margin: EdgeInsets.all(10),
                                      color: Colors.white,
                                      width: 50,
                                      height: 50,
                                      child: Center(
                                        child: Text('${i}'),
                                      ),
                                    ),
                                  )
                              ],
                            ),
                          ),
                        )
                      ],
                    )
                  ),
                    Container(color: Colors.blue),
                    Container(color: Colors.yellow),
                    Container(color: Colors.orange),
                    Container(color: Colors.orange),
                    Container(color: Colors.orange),
                    Container(color: Colors.orange),
                    Container(color: Colors.orange),
                    Container(color: Colors.orange),
                    Container(color: Colors.purple)
                  ],
                controller: _controller,
          )
          )
        ],
      ),
    );
  }
}
zmtzawqlp commented 1 year ago

使用官方的会吗

giantss commented 1 year ago

官方的也会出现,我调了一下,找到原因了,我先关闭了。

width: 200, 设置成全 MediaQuery.of(context).size.width 就不会出现这种情况。

Container(
                          width: 200, //  MediaQuery.of(context).size.width 
                          height: 200,
                          color: Colors.grey,
                          child: SingleChildScrollView(
             ......