我需要在同一页面中的水平和垂直 listView 构建器。顶部是水平的，底部是垂直的列表视图答案

【问题标题】：i need an horizontal and an vertical listView builder in the same page. horizontal at the top and vertical listview at the bottom我需要在同一页面中的水平和垂直 listView 构建器。顶部是水平的，底部是垂直的列表视图
【发布时间】：2021-03-20 18:41:32
【问题描述】：

这是我的代码。我需要顶部的垂直列表视图和底部的水平列表视图。顶部列表视图不应与底部水平列表视图一起移动。当我转到此页面时，我的应用程序冻结。我需要停止 main.dart 并重新启动应用程序。我需要一个类似这样的屏幕。我该怎么办

import 'package:flutter/material.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter_ecommerce_app/common_widget/BottomNavBarWidget.dart';
import 'package:flutter_ecommerce_app/screens/ShoppingCartPage(p).dart';

class ExpanPrdCat extends StatefulWidget {
  @override
  _ExpanPrdCatState createState() => _ExpanPrdCatState();
}

class _ExpanPrdCatState extends State<ExpanPrdCat> {
  bool isLoading = false;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        elevation: 0,
        centerTitle: true,
        title: Text('Vegetables'),
        leading: IconButton(
          onPressed: () {
            Navigator.pop(context);
          },
          icon: Icon(Icons.arrow_back_ios_rounded),
        ),
        actions: [
          IconButton(
            onPressed: () {},
            icon: Icon(Icons.search),
            color: Color(0xFF323232),
          ),
        ],
      ),
      // bottomNavigationBar: BottomNavBarWidget(),
      body: Container(
        child: Column(children: [
          Container(
            height: 90,
            child: Padding(
              padding:
                  const EdgeInsets.only(top: 5, bottom: 5, left: 1, right: 1),
              child: Container(
                  child: ListView.builder(
                scrollDirection: Axis.horizontal,
                shrinkWrap: true,
                itemBuilder: (context, index) {
                  return categoryItemsTabs(index);
                },
                itemCount: 5,
              )),
            ),
          ),
          Container(
            child: ListView.builder(
              primary: false,
              scrollDirection: Axis.vertical,
              shrinkWrap: true,
              itemBuilder: (context, index) {
                return cartItems(index);
              },
              itemCount: 3,
            ),
          )
        ]),
      ),
    );
  }

  //==================================================

  categoryItemsTabs(int index) {
    return Stack(
      alignment: Alignment.center,
      children: <Widget>[
        Container(
          margin: EdgeInsets.only(right: 3),
          height: 40,
          width: 120,
          decoration: BoxDecoration(
              image: DecorationImage(
                  image: NetworkImage(
                      "https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/broccoli-in-a-pile-royalty-free-image-593310638-1564523257.jpg"),
                  fit: BoxFit.cover,
                  colorFilter: ColorFilter.mode(
                      Colors.black.withOpacity(0.4), BlendMode.darken)),
              borderRadius: BorderRadius.circular(15)),
        ),
        Container(
          alignment: Alignment.center,
          child: Text(
            "Organic",
            style: TextStyle(
                color: Colors.white, fontSize: 15, fontWeight: FontWeight.bold),
          ),
        ),
      ],
    );
  }

  cartItems(int index) {
    return Column(
      children: [
        Padding(
          padding: const EdgeInsets.all(8.0),
          child: Container(
            height: 120,
            decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(20),
              color: Colors.grey[300],
            ),
            child: Padding(
              padding: const EdgeInsets.all(8.0),
              child: Row(
                children: [
                  Container(
                    width: 80,
                    height: 80,
                    decoration: BoxDecoration(
                        borderRadius: BorderRadius.circular(10),
                        image: DecorationImage(
                            image: NetworkImage(
                                "https://economictimes.indiatimes.com/thumb/height-450,width-600,imgsize-111140,msid-72862126/potato-getty.jpg?from=mdr"),
                            fit: BoxFit.cover)),
                  ),
                  Padding(
                    padding: const EdgeInsets.only(left: 15, top: 15),
                    child: Row(
                      children: [
                        Container(
                          width: 160,
                          child: Column(
                            crossAxisAlignment: CrossAxisAlignment.start,
                            children: [
                              Text(
                                "potato",
                                style: TextStyle(
                                  fontSize: 25,
                                ),
                                overflow: TextOverflow.ellipsis,
                              ),
                              SizedBox(
                                height: 5,
                              ),
                              Text(
                                "malayalam name",
                                style: TextStyle(fontSize: 20),
                                overflow: TextOverflow.ellipsis,
                              ),
                              SizedBox(
                                height: 5,
                              ),
                              Column(
                                children: [
                                  Text("price"),
                                ],
                              )
                            ],
                          ),
                        ),
                      ],
                    ),
                  ),
                  Row(
                    children: [
                      Column(
                        children: [
                          Container(
                            decoration: BoxDecoration(
                                color: Colors.white,
                                borderRadius: BorderRadius.circular(05)),
                            height: 20,
                            child: DropdownButton<String>(
                              icon: Icon(Icons.keyboard_arrow_down),
                              underline: SizedBox(),
                              hint: Text("choose"),
                              items: ['1 Kg', '2Kg'].map((String value) {
                                return new DropdownMenuItem<String>(
                                  value: value,
                                  child: new Text(value),
                                );
                              }).toList(),
                              onChanged: (_) {},
                            ),
                          ),
                          SizedBox(
                            height: 50,
                          ),
                          Row(
                            children: [
                              Container(
                                height: 20,
                                width: 70,
                                child: RaisedButton(
                                  shape: RoundedRectangleBorder(
                                      borderRadius: BorderRadius.circular(10)),
                                  color: Colors.blue,
                                  onPressed: () {
                                    Navigator.push(
                                      context,
                                      MaterialPageRoute(
                                          builder: (context) => CartScreen()),
                                    );
                                  },
                                  child: Text(
                                    " Add",
                                    style: TextStyle(
                                        color: Colors.white,
                                        fontSize: 12,
                                        fontWeight: FontWeight.w800),
                                  ),
                                ),
                              )
                            ],
                          )
                        ],
                      ),
                    ],
                  )
                ],
              ),
            ),
          ),
        )
      ],
    );
  }
}

【问题讨论】：

添加您在调试控制台中看到的输出。可能会有一些错误日志。
实际上，当我将第二个 ListView 构建器包装在 Expanded 而不是 Container 中时，它现在可以工作了。谢谢你的时间顺便说一句。

标签： flutter

【解决方案1】：

只需在您的 ListView.builder 属性中添加 physics: ClampingScrollPhysics(),。示例：

 Container(
            child: ListView.builder(
              primary: false,
              scrollDirection: Axis.vertical,
              shrinkWrap: true,
              physics: ClampingScrollPhysics(),
              itemBuilder: (context, index) {
                return cartItems(index);
              },
              itemCount: 3,
            ),
          )

【讨论】：

【解决方案2】：

您可以使用SingleChildScrollView 来做到这一点：

水平滚动

  SingleChildScrollView(
          scrollDirection: Axis.horizontal,
          child: Row(
            children: [],
          ),
        ),

垂直滚动

  SingleChildScrollView(
      scrollDirection: Axis.vertical,
      child: Column(
        children: [],
      ),
    ),

【讨论】：

【解决方案3】：

return Scaffold(
  appBar: AppBar(....),
  body: Container(
    child: Column(children: [
      Container(
        height: 90,
        width: MediaQuery.of(context).size.width,
        child: Padding(
          padding:
              const EdgeInsets.only(top: 5, bottom: 5, left: 1, right: 1),
          child: Container(
            child: ListView.builder(
              scrollDirection: Axis.horizontal,
              itemBuilder: (context, index) {
                return categoryItemsTabs(index);
              },
              itemCount: 5,
            ),
          ),
        ),
      ),
      Expanded(
        child: Container(
          child: ListView.builder(
            scrollDirection: Axis.vertical,
            itemBuilder: (context, index) {
              return cartItems(index);
            },
            itemCount: 3,
          ),
        ),
      )
    ]),
  ),
);

【讨论】：