简体   繁体   中英

Flutter ListView.builder creates an infinite scroll. How can I set it to stop at the end of content?

I am using ListView.buildler to layer Widget, into a vertical scroll. My only issue with this approach is that when the scroll reaches the end of my content. It wraps back to the top automatically. Currently I have this:

    new ListView.builder(
    scrollDirection: Axis.vertical,
    key: new Key(randomString(20)),
    reverse: false,
    primary: true,
    itemBuilder: (BuildContext context, int index) {
        return new Column(
        children: <Widget>[
            new Padding(
            padding: _bookPadding,
            child: new Container(
                width: 106.0,
                height: 162.0,
                child: new FadeInImage(
                    placeholder: new AssetImage('assets/loading.gif'),
                    image: this.book.cover)
            ),
            ),
            const Divider(),
            new Padding(
                padding: _bookPadding,
                child: new Text(
                    this.book.bookName,
                    style: getTextStyle())),
            const Divider(),
            new Padding(
            padding: _bookPadding,
            child: new Text(
                'By ' + this.book.author,
                style: getTextStyle(), ),
            ),
           ....

Is it possible to set ListView.builder to no-wrap when it reaches the end?

This ended up being pretty easy. Not sure how I missed it from the docs, all I needed to add was an Item count = non-null. In my case, since I am building all of my content in a single Column widget, inside the list-view builder, this is what my builder looks like:

new ListView.builder(
    scrollDirection: Axis.vertical,
    key: new Key(randomString(20)),
    primary: true,
    itemCount: 1,
    itemBuilder: (BuildContext context, int index) {
        return new Column(
        children: <Widget>[ .....

I do wonder about this implementation if its a bad pattern. Will ListView.Builder still render each nested children of Component Column, as each children of Column becomes visible?

From the docs: "Creates a scrollable, linear array of widgets that are created on demand. This constructor is appropriate for list views with a large (or infinite) number of children because the builder is called only for those children that are actually visible."

You could skip lots of your code. Sometimes the itemBuilder is very nice, especially when you have lots of widgets and can easily identify your item by index, but you can also use the children directly. An example from the ListView documentation :

new ListView(
  shrinkWrap: true,
  padding: const EdgeInsets.all(20.0),
  children: <Widget>[
    const Text('I\'m dedicating every day to you'),
    const Text('Domestic life was never quite my style'),
    const Text('When you smile, you knock me out, I fall apart'),
    const Text('And I thought I was so smart'),
  ],
)

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM