android - 如何在 flutter 中添加水平图像集？

Question

嗨，我正在尝试制作这样的东西。所有的黑球都是png图像。

到目前为止我试过了，

final bolabola = ListView(
      shrinkWrap: true,
      //scrollDirection: Axis.horizontal,
      children: <Widget>[
        Container(
            width: 20.0,
            child: Image(
              image: AssetImage("assets/scoreballs/n1.png",),
              height: 25.0,
              width: 25.0,
            ),
        ),

        Container(
          width: 20.0,
          child: Image(
            image: AssetImage("assets/scoreballs/n1.png",),
            height: 25.0,
            width: 25.0,
          ),
        )
      ],


    );

scrollDirection 不起作用，因为我使用另一个 ListView 来显示页面中的所有组件。 我该如何解决这个问题？

编辑:我的完整代码如下

import 'package:flutter/material.dart';

class Live extends StatefulWidget{
  State<StatefulWidget> createState(){
    return LiveState();
  }
}

class LiveState extends State<Live> {

  @override
  Widget build(BuildContext context) {

    //Live button
    final livestatus = Chip(
        backgroundColor: Colors.red,
        label: Text("LIVE",style: TextStyle(fontSize: 9.0, fontWeight: FontWeight.bold, color: Colors.white), textAlign: TextAlign.center),
    );

    //Status bar
    final status = Text("Richmond College won the toss and elected to bat first", style: TextStyle(fontSize: 12.0, fontWeight: FontWeight.bold), textAlign: TextAlign.center);

    //School Crest
    final crest = Image(
        image: AssetImage("assets/crest.png"),
        height: 79.0,
        width: 64.0,
    );

    final score = Text("182/4", style: TextStyle(fontSize: 73.0, color: Colors.blueAccent, fontWeight: FontWeight.bold), textAlign: TextAlign.center,);

    final overs = Text("23.5 Overs", style:TextStyle(fontSize: 30.0, color: Colors.grey, fontWeight: FontWeight.bold),textAlign: TextAlign.center, );

    final scorecard = Text("Scorecard", style:TextStyle(fontSize: 10.0, color: Colors.black, fontWeight: FontWeight.bold),textAlign: TextAlign.center, );

    final bolabola = ListView(
      shrinkWrap: true,
      //scrollDirection: Axis.horizontal,
      children: <Widget>[
        Container(
            width: 20.0,
            child: Image(
              image: AssetImage("assets/scoreballs/n1.png",),
              height: 25.0,
              width: 25.0,
            ),
        ),

        Container(
          width: 20.0,
          child: Image(
            image: AssetImage("assets/scoreballs/n1.png",),
            height: 25.0,
            width: 25.0,
          ),
        )
      ],


    );


/*
    final scoreballs = Image(
      image: AssetImage("assets/scoreballs/n1.png",),
      height: 25.0,
      width: 25.0,
    );

    */

        return Scaffold(
          backgroundColor: Colors.white,
          body: Center(
            child: ListView(
              shrinkWrap: true,
              children: <Widget>[
                livestatus,
                SizedBox(height: 0.0),
                status,
                SizedBox(height: 10.0),
                crest,
                SizedBox(height: 5.0),
                score,
                overs,
                scorecard,
                bolabola,


              ],
            )
          ),
        );
  }
}

Answer 1

将 scrollDirection: Axis.horizo​​ntal 添加到 ListView 对象。 当使用水平 scrollDirection 时，Container 对象必须指定高度

以下代码来 self 必须实现水平图像轮播的项目:

Container(
        margin: EdgeInsets.only(top: 20.0),
        height: 200.0,
        child: ListView(
          padding: EdgeInsets.all(0.0), 
          scrollDirection: Axis.horizontal,
          shrinkWrap: true,
          children: <Widget>[
            Row( 
              mainAxisAlignment: MainAxisAlignment.center,
              crossAxisAlignment: CrossAxisAlignment.center,
              mainAxisSize: MainAxisSize.min,
              children: _imagesWidget // this is a list containing Cards with image
            )
          ]
        ),
      );