Question

我想实现带有类别的水平滚动：

我将我的类别部分放在列中（也许这不是正确的方法，如果我错了，请纠正我），然后尝试使用ListView / Slivers使我的类别可滚动。我遇到的问题是，如果我在Column中使用ListView，则需要为其指定约束。我试图用Expanded小部件包装它，但它对我没有用。然后我尝试了CustomScrollView和Slivers，但看来我做错了。您能为我提出这种观点的建议吗？还是可以纠正我。

array:3 [
  "data" => array:3 [
    0 => array:4 [
      "id" => 1
      "languages" => array:1 [
        0 => array:4 [
          "languageId" => 1
          "languageCode" => "ho"
          "languageName" => "Dott. Orfeo Sartori"
          "categoryName" => "rem"
        ]
      ]
      "imageUrl" => null
      "enabled" => true
    ]
    1 => array:4 [
      "id" => 2
      "languages" => array:1 [
        0 => array:4 [
          "languageId" => 1
          "languageCode" => "ho"
          "languageName" => "Dott. Orfeo Sartori"
          "categoryName" => "accusamus"
        ]
      ]
      "imageUrl" => null
      "enabled" => true
    ]
    2 => array:4 [
      "id" => 3
      "languages" => array:1 [
        0 => array:4 [
          "languageId" => 1
          "languageCode" => "ho"
          "languageName" => "Dott. Orfeo Sartori"
          "categoryName" => "totam"
        ]
      ]
      "imageUrl" => null
      "enabled" => true
    ]
  ]
  "links" => array:4 [
    "first" => "http://localhost/api/v1/categories?page=1"
    "last" => "http://localhost/api/v1/categories?page=1"
    "prev" => null
    "next" => null
  ]
  "meta" => array:7 [
    "current_page" => 1
    "from" => 1
    "last_page" => 1
    "path" => "http://localhost/api/v1/categories"
    "per_page" => 15
    "to" => 3
    "total" => 3
  ]
]

Answer 1

使用ListView超出了renderview端口时，您会收到错误消息。要解决此问题，请在ListView小部件中扭曲Container并为其指定height和width属性：

检查以下内容：

Container(
        // change your height based on preference
        height: 80,
        width: double.infinity,
        child: ListView(
          // set the scroll direction to horizontal
          scrollDirection: Axis.horizontal,
          children: <Widget>[
            // add your widgets here
            CategoryCard(
              title: 'Featured',
              previewImageAsset:
              'assets/images/bliny-shokolad-klubnika.jpg',
            ),
            // space them using a sized box 
            SizedBox(width: 15,),
            CategoryCard(
              title: 'Featured',
              previewImageAsset:
              'assets/images/bliny-shokolad-klubnika.jpg',
            ),
          ],
        ),
      ),

列颤振内的水平滚动

1 个答案: