首页 > 解决方案 > 与另一个小部件隐藏时如何在零位置滚动列表视图?

问题描述

在此处输入图像描述

我正在学习颤振。我有带有 Listview 的页面,它以水平滚动显示图像。另外,我还有另一个列表视图,它在水平列表视图的底部显示图像。现在,当我检查 Listview 数据进行水平滚动并到达项目的最后一个位置时,我使用垂直滚动检查 listview 底部的另一个数据,第一个 listview 是不可见的。这是完美的。但是当我从下到上滚动时,水平列表视图仍然保持在最后一个位置而不是零位置。我该怎么做?

我附上了我的代码和截图我想要什么?

[![import 'package:flutter/material.dart';

class HomePage1 extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage1> {
  BuildContext context;

  @override
  Widget build(BuildContext context) {
    this.context = context;
    // TODO: implement build
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
          appBar: AppBar(
            centerTitle: true,
            backgroundColor: Colors.white,
            title: Text(
              'Demo App',
              style: TextStyle(color: Colors.black),
            ),
          ),
          body: SingleChildScrollView(
            scrollDirection: Axis.vertical,
            child: Column(
              children: <Widget>\[
                _buildTrandingUI(),
                _buildcardwithimg('assets/blue.png', ''),
                _buildcardwithimg('assets/blue.png', ''),
              \],
            ),
          )),
    );
  }

  @override
  void initState() {
    super.initState();
  }

  //Design Sale UI
  _buildcardwithimg(String imgpath, String text) {
    return Container(
      height: 380,
      margin: const EdgeInsets.symmetric(vertical: 8.0),
      child: new Stack(
        children: <Widget>\[
          new Container(
            margin: const EdgeInsets.only(right: 8.0, left: 8.0),
            decoration: new BoxDecoration(
              color: Colors.white,
              shape: BoxShape.rectangle,
              borderRadius: new BorderRadius.circular(8.0),
              boxShadow: <BoxShadow>\[
                new BoxShadow(
                  color: Colors.grey,
                  blurRadius: 10.0,
                  offset: new Offset(0.0, 10.0),
                )
              \],
              image: DecorationImage(
                  fit: BoxFit.cover, image: new AssetImage(imgpath)),
            ),
            child: new Container(
              alignment: Alignment.topLeft,
              padding: const EdgeInsets.all(10.0),
              child: Text(
                text,
                style: TextStyle(
                    color: Colors.white,
                    fontWeight: FontWeight.bold,
                    fontSize: 14.0),
              ),
            ),
          ),
        \],
      ),
    );
  }

  //Desing Tranding UI
  _buildTrandingUI() {
    List<String> titlearr = \[\];
    titlearr.add('The Grunge Collection!');
    titlearr.add('On Point!');
    titlearr.add('A Fresh Edge To Every Wear');
    titlearr.add('Up to 50% Off');

    List<String> sbutitlearr = \[\];
    sbutitlearr.add('Born For the Road');
    sbutitlearr.add('Premium Bags That Steak The Spotlight');
    sbutitlearr.add('Printed Tees');
    sbutitlearr.add('Born For the Road');

    List<String> Traimgarr = \[\];
    Traimgarr.add('assets/grun.png');
    Traimgarr.add('assets/onpoint.png');
    Traimgarr.add('assets/grun.png');
    Traimgarr.add('assets/onpoint.png');

    return Container(
        height: 280.0,
        margin: const EdgeInsets.symmetric(vertical: 4.0),
        child: new Stack(
          children: <Widget>\[
            new Container(
              margin: const EdgeInsets.only(left: 8.0, right: 8.0),
              decoration: new BoxDecoration(
                  color: Colors.white,
                  shape: BoxShape.rectangle,
                  borderRadius: BorderRadius.circular(8.0),
                  boxShadow: <BoxShadow>\[
                    new BoxShadow(
                      color: Colors.grey,
                      blurRadius: 10.0,
                      offset: new Offset(0.0, 10.0),
                    )
                  \]),
              child: new Container(
                alignment: Alignment.topLeft,
                padding: const EdgeInsets.all(10.0),
                child: Text(
                  'Trending Now',
                  style: TextStyle(color: Colors.blueGrey),
                ),
              ),
            ),
            new Center(
                child: new Container(
              height: 245.0,
              margin: const EdgeInsets.only(left: 10.0, right: 10.0, top: 20.0),
              child: ListView.builder(
                  scrollDirection: Axis.horizontal,
                  itemCount: Traimgarr.length,
                  itemBuilder: (context, index) {
                    return Column(
                      crossAxisAlignment: CrossAxisAlignment.center,
                      mainAxisSize: MainAxisSize.min,
                      children: <Widget>\[
                        Container(
                          height: 190.0,
                          width: 280.0,
                          margin: EdgeInsets.all(10.0),
                          child: Image.asset(
                            Traimgarr\[index\],
                            fit: BoxFit.cover,
                          ),
                        ),
                        Text(
                          titlearr\[index\],
                          style: TextStyle(fontWeight: FontWeight.bold),
                        ),
                        Text(
                          sbutitlearr\[index\],
                          style: TextStyle(color: Colors.grey),
                        )
                      \],
                    );
                  }),
            ))
          \],
        ));
  }
}][1]][1]

标签: listviewdartflutterscrollbar

解决方案


推荐阅读