Question

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

 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类表单下面，我要滚动#################################### ################################################ ################################################ ################################################ ################################################ #########################

 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: () {},
      );
  }
}

Answer 1

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

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);
    });
  }
}

Answer 2

您可以使用“列”或“行”小部件垂直或水平对齐子级。将扩展列表内容还原为全宽时，可以使用扩展窗口小部件。实现自动滚动非常简单。 ListView小部件在其构造函数中接受controller：的参数。

final ScrollController _scrollController = new ScrollController();

实现全宽和自动滚动。

new Column(
children: [
     new Expanded(
           new ListView.builder(builder:(BuildContext _context, int index){
               return //your list elements here.
             },
          controller: _scrollController,
          itemCount: count //total count of elements on list
         ),
       ),
      // your other widgets here.
   ]
)

用于自动滚动

//your logic here
_scrollController.animateTo(double position, Duration duration, Curves curve);//refer to documentation

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

2 个答案: