【问题标题】:Listview inside the scroll view in flutter颤动中滚动视图内的Listview
【发布时间】:2018-12-18 08:42:54
【问题描述】:

我正在尝试制作这种类型的视图

有 3 种类型的最新新闻、体育新闻和旧新闻,它们有 3 个列表视图数据正在填充,但我无法滚动列表视图或完整的滚动视图没有滚动我从 1 周开始尝试它找到下面的代码

我可以进行布局,但它根本不滚动

第一个标签视图

class First_Tab_Layout extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    First_State fst_state() => new First_State();
    return fst_state();
  }
}

class First_State extends State<First_Tab_Layout> {
  List latest_news_list;
  List sports_news_list;
  List cinema_news_list;

  latestnews() async {
    var latest_news_url = common_url + 'getlatestPosts';
    print(latest_news_url);
    http.Response latest_newsresponse = await http.get(latest_news_url);
    var latest_news_response = json.decode(latest_newsresponse.body);
    setState(() {
      latest_news_list = latest_news_response['posts'];
    });
  }

  sportsnews() async {
    var sports_news_url = common_url + 'getsportsPosts';
    print(sports_news_url);
    http.Response sports_newsresponse = await http.get(sports_news_url);
    var sports_news_response = json.decode(sports_newsresponse.body);
    setState(() {
      sports_news_list = sports_news_response['posts'];
    });
  }

  cinemanews() async {
    var cinema_news_url = common_url + 'getcinemaPosts';
    print(cinema_news_url);
    http.Response cinema_newsresponse = await http.get(cinema_news_url);
    var cinema_news_response = json.decode(cinema_newsresponse.body);
    setState(() {
      cinema_news_list = cinema_news_response['posts'];
    });
  }

  @override
  void initState() {
    super.initState();
    latestnews();
    sportsnews();
    cinemanews();
  }

  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      debugShowCheckedModeBanner: false,
      home: new Scaffold(
          body: new ListView(
        primary: true,
        children: <Widget>[
          new Container(
            child: new Text(
              'Latest News',
              style: new TextStyle(fontSize: 16.0),
            ),
            margin: EdgeInsets.only(left: 10.0, right: 10.0, bottom: 5.0),
            alignment: Alignment(-1.0, 0.0),
          ),
          new Container(
            child: new Divider(
              color: secondarycolor,
            ),
            margin: EdgeInsets.only(right: 10.0, left: 10.0),
          ),
          new Container(
            child: new ListView.builder(
              shrinkWrap: true,
              itemCount: latest_news_list == null ? 0 : latest_news_list.length,
              itemBuilder: (BuildContext context, int indexpos) {
                return new GestureDetector(
                  onTap: () {
                    Navigator.push(
                        context,
                        new MaterialPageRoute(
                            builder: (context) => new News_Details(
                                  postid: latest_news_list[indexpos]['id'],
                                )));
                  },
                  child: new Card(
                    elevation: 4.0,
                    margin: EdgeInsets.only(left: 10.0, right: 10.0, top: 5.0),
                    child: new Row(
                      children: <Widget>[
                        new Container(
                          child: new Image.network(
                            latest_news_list[indexpos]['image'],
                            width: 150.0,
                            fit: BoxFit.fill,
                          ),
                        ),
                        new Flexible(
                          child: new Column(
                            crossAxisAlignment: CrossAxisAlignment.start,
                            children: <Widget>[
                              new Container(
                                child: new Text(
                                    latest_news_list[indexpos]['title']),
                                margin: EdgeInsets.only(left: 10.0),
                              ),
                              new Container(
                                child: new Text(
                                  latest_news_list[indexpos]['content'],
                                  softWrap: true,
                                  maxLines: 4,
                                ),
                                margin: EdgeInsets.only(left: 10.0, top: 5.0),
                              ),
                            ],
                          ),
                        )
                      ],
                    ),
                  ),
                );
              },
            ),
          ),
          new Container(
            child: new Text(
              'Sports News',
              style: new TextStyle(fontSize: 16.0),
            ),
            margin: EdgeInsets.only(left: 10.0, right: 10.0, top: 5.0),
            alignment: Alignment(-1.0, 0.0),
          ),
          new Container(
            child: new Divider(
              color: secondarycolor,
            ),
            margin: EdgeInsets.only(right: 10.0, left: 10.0),
          ),
          new Container(
            child: new ListView.builder(
              shrinkWrap: true,
              itemCount: sports_news_list == null ? 0 : sports_news_list.length,
              itemBuilder: (BuildContext context, int indexpos) {
                return new GestureDetector(
                  child: new Card(
                    elevation: 4.0,
                    margin: EdgeInsets.only(left: 10.0, right: 10.0, top: 5.0),
                    child: new Row(
                      children: <Widget>[
                        new Container(
                          child: new Image.network(
                            sports_news_list[indexpos]['image'],
                            width: 150.0,
                            height: 75.0,
                            fit: BoxFit.fill,
                          ),
                        ),
                        new Column(
                          children: <Widget>[
                            new Container(
                              child:
                                  new Text(sports_news_list[indexpos]['title']),
                              margin: EdgeInsets.only(left: 10.0),
                            ),
                            new Container(
                              child:
                                  new Text(sports_news_list[indexpos]['title']),
                              margin: EdgeInsets.only(left: 10.0, top: 5.0),
                            ),
                          ],
                        )
                      ],
                    ),
                  ),
                );
              },
            ),
          ),
          new Container(
            child: new Text(
              'Cinema News',
              style: new TextStyle(fontSize: 16.0),
            ),
            margin: EdgeInsets.only(
                left: 10.0, right: 10.0, top: 10.0, bottom: 5.0),
            alignment: Alignment(-1.0, 0.0),
          ),
          new Container(
            child: new Divider(
              color: secondarycolor,
            ),
            margin: EdgeInsets.only(right: 10.0, left: 10.0),
          ),
          new Container(
            child: new ListView.builder(
              shrinkWrap: true,
              itemCount: cinema_news_list == null ? 0 : cinema_news_list.length,
              itemBuilder: (BuildContext context, int indexpos) {
                return new GestureDetector(
                  child: new Card(
                    elevation: 4.0,
                    margin: EdgeInsets.only(left: 10.0, right: 10.0, top: 5.0),
                    child: new Row(
                      children: <Widget>[
                        new Container(
                          child: new Image.network(
                            cinema_news_list[indexpos]['image'],
                            width: 150.0,
                            height: 75.0,
                            fit: BoxFit.fill,
                          ),
                        ),
                        new Column(
                          children: <Widget>[
                            new Container(
                              child: new Text(
                                  cinema_news_list[indexpos]['categorytitle']),
                              margin: EdgeInsets.only(left: 10.0),
                            ),
                            new Container(
                              child: new Text(
                                  cinema_news_list[indexpos]['categorytitle']),
                              margin: EdgeInsets.only(left: 10.0, top: 5.0),
                            ),
                          ],
                        )
                      ],
                    ),
                  ),
                );
              },
            ),
          ),
        ],
      )),
    );
  }
}

【问题讨论】:

    标签: flutter flutter-layout flutter-sliver


    【解决方案1】:

    这对我有用。不确定这是否适合您。试一次。我刚刚在内部ListView 中添加了物理。

    new Container(
                child: new ListView.builder(
                  shrinkWrap: true,
                  physics: const NeverScrollableScrollPhysics(),
    

    【讨论】:

    • 物理问题解决了我的问题,因此它仍然可以在 Flutter 1.9.1 版本中作为修复工作
    • shrinkwrap 使列表视图立即展开,而 NeverScrollable 使其中的滚动禁用,从而使整个页面滚动。但是,如果我希望两者都以不展开列表视图的方式滚动,并且在两者之间以适当的方式声明滚动事件,该怎么办
    • 这解决了我的问题,listview inside customscrollview inside tabbarview.. 滚动父折叠小部件
    【解决方案2】:

    这对我有用:

    Widget build(BuildContext context) {
    return Container(
      color: Colors.white,
      child: Padding(
        padding: const EdgeInsets.fromLTRB(10.0, 10.0, 10.0, 20.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          mainAxisAlignment: MainAxisAlignment.start,
          children: <Widget>[
            Expanded(
              child: Container(
                child: ListView(
                  children: <Widget>[
                    selectedAddressSection(),
                    Padding(
                      padding: EdgeInsets.fromLTRB(15, 10, 0, 10),
                      child: Text("YOUR FAVOURITE PAYMENT METHODS",
                          textAlign: TextAlign.left,
                          style: TextStyle(
                              fontSize: 14.0,
                              fontFamily: 'Novecento Book',
                              fontWeight: FontWeight.bold)),
                    ),
                    selectedPaymentMethod(),
                    Padding(
                      padding: EdgeInsets.fromLTRB(15, 10, 0, 10),
                      child: Text("PAYMENT DETAILS",
                          textAlign: TextAlign.left,
                          style: TextStyle(
                              fontSize: 14.0,
                              fontFamily: 'Novecento Book',
                              fontWeight: FontWeight.bold)),
                    ),
                    SizedBox(
                      height: 8.0,
                    ),
                    Row(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      children: <Widget>[
                        Container(
                          margin: EdgeInsets.only(left: 15),
                          child: Text(
                            "Subtotal",
                            textAlign: TextAlign.start,
                            style: TextStyle(
                                color: const Color(0xFF000000),
                                fontSize: 12.0,
                                fontFamily: 'Novecento Book',
                                fontWeight: FontWeight.w300),
                          ),
                        ),
                        Container(
                          margin: EdgeInsets.only(right: 15),
                          child: Text(
                            '\u{20B9}${2500.00}',
                            textAlign: TextAlign.start,
                            style: TextStyle(
                                color: const Color(0xFF000000),
                                fontSize: 12.0,
                                fontFamily: 'Novecento Book',
                                fontWeight: FontWeight.w300),
                          ),
                        ),
                      ],
                    ),
                    SizedBox(
                      height: 8.0,
                    ),
                    Row(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      children: <Widget>[
                        Container(
                          margin: EdgeInsets.only(left: 15),
                          child: Text(
                            "Shipping",
                            textAlign: TextAlign.start,
                            style: TextStyle(
                                color: const Color(0xFF000000),
                                fontSize: 12.0,
                                fontFamily: 'Novecento Book',
                                fontWeight: FontWeight.w300),
                          ),
                        ),
                        Container(
                          margin: EdgeInsets.only(right: 15),
                          child: Text(
                            'Free',
                            textAlign: TextAlign.start,
                            style: TextStyle(
                                color: const Color(0xFF000000),
                                fontSize: 12.0,
                                fontFamily: 'Novecento Book',
                                fontWeight: FontWeight.w300),
                          ),
                        ),
                      ],
                    ),
                    SizedBox(
                      height: 8.0,
                    ),
                    Divider(
                      color: Colors.grey.shade400,
                      height: 10,
                      thickness: 0.5,
                      indent: 10,
                      endIndent: 10,
                    ),
                    SizedBox(
                      height: 8.0,
                    ),
                    Row(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      children: <Widget>[
                        Container(
                          margin: EdgeInsets.only(left: 15),
                          child: Text(
                            "Grand total",
                            textAlign: TextAlign.start,
                            style: TextStyle(
                                color: const Color(0xFF000000),
                                fontSize: 12.0,
                                fontFamily: 'Novecento Book',
                                fontWeight: FontWeight.bold),
                          ),
                        ),
                        Container(
                          margin: EdgeInsets.only(right: 15),
                          child: Text(
                            '\u{20B9}${2500.00}',
                            textAlign: TextAlign.start,
                            style: TextStyle(
                                color: const Color(0xFF000000),
                                fontSize: 12.0,
                                fontFamily: 'Novecento Book',
                                fontWeight: FontWeight.bold),
                          ),
                        ),
                      ],
                    ),
                    Divider(
                      color: Colors.grey.shade400,
                      height: 20,
                      thickness: 0.5,
                      indent: 10,
                      endIndent: 10,
                    ),
                    // standardDelivery(),
                    //priceSection()
                  ],
                ),
              ),
            ),
          ],
        ),
      ),
    );
    

    }

    【讨论】:

      【解决方案3】:

      尝试在内部ListView中使用physics: const NeverScrollableScrollPhysics() 除了shrinkWrap: true 如下所示。

      Container(
              child: ListView(
                children: <Widget>[
                  Container(..*/Widget 1*/..),
                  Container(child: new ListView.builder(
                            shrinkWrap: true, //Put  shrinkWrap as true
                            physics: const NeverScrollableScrollPhysics(), //Put this in the inner ListView Builder
                            itemBuilder: (BuildContext context, int index) {...*/Rest of the code*/..
                             
      
      
      
                
      

      【讨论】:

        猜你喜欢
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 2021-01-19
        相关资源
        最近更新 更多