Warning: file_get_contents(/data/phpspider/zhask/data//catemap/1/dart/3.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Flutter 颤振-如何自动滚动列表视图,使部分可见的平面按钮完全可见_Flutter_Dart - Fatal编程技术网

Flutter 颤振-如何自动滚动列表视图,使部分可见的平面按钮完全可见

Flutter 颤振-如何自动滚动列表视图,使部分可见的平面按钮完全可见,flutter,dart,Flutter,Dart,我的应用程序是一个简单的应用程序栏和一个由十个平面按钮组成的水平滚动列表视图 如您所见,有一个部分可见的扁平按钮 我想在用户按下部分可见的按钮时以编程方式滚动ListView,使其完全可见 我该怎么做 我在此附上我的代码: class _DashboardScreenState extends State<DashboardScreen> { @override Widget build(BuildContext context) { return Scaffold

我的应用程序是一个简单的应用程序栏和一个由十个平面按钮组成的水平滚动列表视图

如您所见,有一个部分可见的扁平按钮

我想在用户按下部分可见的按钮时以编程方式滚动ListView,使其完全可见

我该怎么做

我在此附上我的代码:

class _DashboardScreenState extends State<DashboardScreen> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('FlutterApp'),
      ),
      body: Container(
        height: 70.0,
        child: ListView.builder(
          scrollDirection: Axis.horizontal,
          itemCount: 10,
          itemBuilder: (context, index) => _scrollableList(context, index),
        ),
      ),
    );
  }
}

Widget _scrollableList (BuildContext context, int index){
  return Container( 
    child: FlatButton(
      color: Colors.white,
      textColor: Colors.red,
      onPressed: (){},
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(10.0),
        side: BorderSide(color: Colors.red)
      ),
      child: Text('data $index'),
    )
  );
}
class\u仪表板屏幕状态扩展状态{
@凌驾
小部件构建(构建上下文){
返回脚手架(
appBar:appBar(
标题:文本(“应用程序”),
),
主体:容器(
身高:70.0,
子项:ListView.builder(
滚动方向:轴水平,
物品计数:10,
itemBuilder:(上下文,索引)=>\u scrollableList(上下文,索引),
),
),
);
}
}
Widget\u scrollableList(BuildContext上下文,int索引){
退回货柜(
孩子:扁平按钮(
颜色:颜色,白色,
textColor:Colors.red,
按下:(){},
形状:圆形矩形边框(
边界半径:边界半径。圆形(10.0),
边:边框边(颜色:Colors.red)
),
子项:文本('data$index'),
)
);
}

您可以使用插件中的
ScrollablePositionedList
来实现这一点

创建ListView,如下所示:

ItemScrollController\u scrollController=ItemScrollController();
ScrollablePositionedList.builder(
itemScrollController:\u scrollController,
滚动方向:轴水平,
物品计数:10,
itemBuilder:(上下文,索引)=>\u scrollableList(上下文,索引),
)
点击按钮,滚动至该按钮,如下所示:

onPressed:(){
_scrollController.scrollTo(索引:索引,持续时间:持续时间(秒:1));
}

如果您有任何疑问,请告诉我。

它可以工作,但同时它也有一个巨大的缺点:当您按下按钮时,它会滚动到屏幕的左边距,从而为用户隐藏左侧的元素。要正常工作,您必须将按下的按钮放置在滚动区域的中心,让用户知道两侧是否有更多可用的元素。是否尝试将索引设置为
index:index>1?索引-2:0,
。在单击按钮之前,它将显示至少2个按钮。这是一种更好的方法,但仍然存在相同的问题。它精确地滚动到索引按钮的左侧,并且在索引-2之外还有更多的元素是不直观的。在这种情况下,您可以在列表中手动找到按钮的位置并滚动,直到按钮和下一个按钮的半药剂可见为止。。。但是请记住,如果使用_scrollController.scrollTo的
对齐
值略大于0,则项目不会一直向左滚动。