如何将列表视图的宽度设置为全屏宽度，以及如何使其自动滚动

本文介绍了如何将列表视图的宽度设置为全屏宽度，以及如何使其自动滚动的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

如何使列表视图的宽度变为全屏宽度，以及如何使其在几秒钟后自动滚动...

how to give my list view width to full screen width and how to make it auto scroll after few second ...

void scrollAfter(ScrollController scrollController, {int seconds}) { Future.delayed(Duration(seconds: seconds), () { var offset = 550.0; var scrollDuration = Duration(seconds: 2); scrollController.animateTo(offset, duration: scrollDuration, curve: Curves.ease); }); } @override Widget build(BuildContext context) { var scrollController = ScrollController(); scrollAfter(scrollController, seconds: 2); // TODO: implement build return Container(child: new StreamBuilder( stream: Firestore.instance.collection('Top List').snapshots(), builder: (BuildContext context,snapshot) { if (!snapshot.hasData) return new Text("no"); var documentsLength = snapshot.data.documents.length; return ListView.builder(itemCount: documentsLength, scrollDirection: Axis.horizontal, controller: scrollController, shrinkWrap: true, itemBuilder: (context, index) { return buildlistItem((AllProduct.fromDocument(snapshot.data.documents[index]))); });

在我的buildlistItem类表单下面，我要滚动#################################### ################################################ ################################################ ################################################ ################################################ #########################

below my buildlistItem class form which i want to scroll ######################################################################################################################################################################################################################################################################

Widget buildlistItem(AllProduct alllist) { return new GestureDetector( child: Container( child: new Card( elevation: 2.0, margin: const EdgeInsets.all(5.0), child: new Stack( alignment: Alignment.center, children: <Widget>[ new Hero( tag: alllist.title, child: new Imagework(alllist.backgroundImageUrl, fit: BoxFit.cover), ), new Align( child: new Container( padding: const EdgeInsets.all(6.0), child: Row( mainAxisAlignment: MainAxisAlignment.spaceBetween, children: <Widget>[ new Column( mainAxisSize: MainAxisSize.min, crossAxisAlignment: CrossAxisAlignment.start, children: <Widget>[ new Text(alllist.title, style: new TextStyle(color: Colors.white,fontFamily: "ChelaOne-Regular")), ], ), IconButton(onPressed: (){ }, icon: new Icon(Icons.add_shopping_cart,color: Colors.white,), ) ], ), color: Colors.black.withOpacity(0.4), ), alignment: Alignment.bottomCenter, ), ], ), ), ), onTap: () {}, ); } }

推荐答案

您可以使用ScrollController来实现自动滚动部分.请参考以下示例.

You can use ScrollController to achieve the auto-scrolling part. Please refer the below example.

import 'dart:async'; import 'package:flutter/material.dart'; void main() => runApp(new MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { var scrollController = ScrollController(); var listView = ListView.builder( itemBuilder: (context, index) => Text("$index"), controller: scrollController, ); scrollAfter(scrollController, seconds: 2); return MaterialApp( title: 'Trial', home: Scaffold( appBar: AppBar(title: Text('List scroll')), body: listView)); } void scrollAfter(ScrollController scrollController, {int seconds}) { Future.delayed(Duration(seconds: seconds), () { var offset = 550.0; var scrollDuration = Duration(seconds: 2); scrollController.animateTo(offset, duration: scrollDuration, curve: Curves.ease); }); } }