滚动向下滚动时,可滚动列表视图会弹回顶部

时间:2019-08-12 18:10:00

标签: layout flutter

我实现了一个偏移量,以将列表视图向下推到屏幕高度的四分之一,以适应列表视图上方显示的图像(不在代码中)。但是现在当我向下滚动到最后一个磁贴时,列表视图又跳回了上层。

import 'package:flutter/material.dart';

class ProductsPage extends StatelessWidget {
  var data = [
    {
      "title": "Lorem ipsum dolor",
    },
    {
      "title": "Lorem ipsum dolor",
    },
    {
      "title": "Lorem ipsum dolor",
    },
    {
      "title": "Lorem ipsum dolor",
    },
    {
      "title": "Lorem ipsum dolor",
    },
  ];

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      backgroundColor: Colors.white,
      body: new Stack(
        children: <Widget>[
          new Transform.translate(
            offset:
                new Offset(0.0, MediaQuery.of(context).size.height / 4),
            child: new ListView.builder(
              padding: const EdgeInsets.all(0.0),
              scrollDirection: Axis.vertical,
              primary: true,
              itemCount: data.length,
              itemBuilder: (BuildContext content, int index) {
                return ListItem(
                    title: data[index]["title"],
                );
              },
            ),
          ),
        ],
      ),
    );
  }
}

class ListItem extends StatefulWidget {
  String title;

  ListItem({this.title});

  @override
  _ListItemState createState() => new _ListItemState();
}

class _ListItemState extends State<ListItem> {
  @override
  Widget build(BuildContext context) {
    return new Row(
      children: <Widget>[
        new Container(width: 10.0, height: 190.0, color: Colors.black),
        new Expanded(
          child: Container(
            color: Colors.black,
                      child: new Padding(
              padding:
                  const EdgeInsets.symmetric(vertical: 40.0, horizontal: 20.0),
              child: new Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: <Widget>[
                  new Text(
                    widget.title,
                    style: TextStyle(
                        color: Colors.grey.shade800,
                        fontSize: 18.0,
                        fontWeight: FontWeight.bold),
                  ),
                ],
              ),
            ),
          ),
        ),
      ],
    );
  }
}

该代码有望生成一个可滚动的列表,您可以在列表中的任何位置停下来,而无需自动滚动回到顶部。

0 个答案:

没有答案