如何将我的列表视图宽度设置为全屏宽度以及如何使其自动滚动 [英] how to give my list view width to full screen width and how to make it auto scroll

问题描述

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

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 Image.network(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);
    });
  }
}

这篇关于如何将我的列表视图宽度设置为全屏宽度以及如何使其自动滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！