Question

我正在玩纸牌游戏。我想在游戏桌上连续显示我的牌。我为卡制作了一个自定义小部件，并将其放入listview.builder中。卡之间存在空格，卡不适合屏幕。我在互联网上搜索了此问题，但没有解决。我的错在哪里你能帮我吗？

CardViewWidget：

Widget cardViewWidget(PlayingCard card) {
return Container(
  height: 80.0,
  width: MediaQuery.of(context).size.width / 5,
  color: Colors.red,
  child: Column(
    children: <Widget>[
      Text(
        _returnAssetUrl(card),
        style: TextStyle(fontSize: 15.0),
      ),
    ],
  ),
);}

内部版本：

Widget build(BuildContext context) {
return Scaffold(
  body: Container(
    child: Column(
      children: <Widget>[
        Container(
          child: Column(
            children: <Widget>[
              Text(
                oppoHand[0].cardType.toString() +
                    oppoHand[0].cardSuit.toString(),
                style: TextStyle(fontSize: 20.0),
              ),
              Text(
                oppoHand[1].cardType.toString(),
                style: TextStyle(fontSize: 20.0),
              ),
              Text(
                oppoHand[2].cardType.toString(),
                style: TextStyle(fontSize: 20.0),
              ),
              Text(
                oppoHand[3].cardType.toString(),
                style: TextStyle(fontSize: 20.0),
              ),
              Text(
                oppoHand[4].cardType.toString(),
                style: TextStyle(fontSize: 20.0),
              ),
            ],
          ),
        ),
        Container(
          child: Text("Score: " + oppoScore.toString()),
        ),
        Container(
          child: Column(children: <Widget>[
            ListView.builder(
              shrinkWrap: true,
              itemCount: groundDeck.length,
              itemBuilder: (BuildContext context, int index) {
                return Text(groundDeck[index].cardType.toString());
              },
            ),
          ]),
        ),
        Container(
          child: Text("Score: " + myScore.toString()),
        ),
        Container(
          height: 100.0,
          width: MediaQuery.of(context).size.width,
          child: Row(
            children: <Widget>[
              ListView.builder(
                  scrollDirection: Axis.horizontal,
                  shrinkWrap: true,
                  itemCount: myHand.length,
                  itemBuilder: (BuildContext context, int index) {
                    return FlatButton(
                      onPressed: () {
                        setState(() {
                          _clickedCard(index);
                        });
                      },
                      child: cardViewWidget(myHand[index]),
                    );
                  }),
            ],
          ),
        ),
      ],
    ),
  ),
);}}

这是我的屏幕： enter image description here

Answer 1

运行此。这将解决您的问题！

Widget build(BuildContext context) {
  return Scaffold(
    body: Container(
      child: Column(
        children: <Widget>[
          Container(
            child: Column(
              children: <Widget>[
                Text(
                  oppoHand[0].cardType.toString() + oppoHand[0].cardSuit.toString(),
                  style: TextStyle(fontSize: 20.0),
                ),
                Text(
                  oppoHand[1].cardType.toString(),
                  style: TextStyle(fontSize: 20.0),
                ),
                Text(
                  oppoHand[2].cardType.toString(),
                  style: TextStyle(fontSize: 20.0),
                ),
                Text(
                  oppoHand[3].cardType.toString(),
                  style: TextStyle(fontSize: 20.0),
                ),
                Text(
                  oppoHand[4].cardType.toString(),
                  style: TextStyle(fontSize: 20.0),
                ),
              ],
            ),
          ),
          Container(
            child: Text("Score: " + oppoScore.toString()),
          ),
          Container(
            child: Column(children: <Widget>[
              ListView.builder(
                shrinkWrap: true,
                itemCount: groundDeck.length,
                itemBuilder: (BuildContext context, int index) {
                  return Text(groundDeck[index].cardType.toString());
                },
              ),
            ]),
          ),
          Container(
            child: Text("Score: " + myScore.toString()),
          ),
          Container(
            height: 100.0,
            width: MediaQuery.of(context).size.width,
            child: ListView.builder(
                 scrollDirection: Axis.horizontal,
                 shrinkWrap: true,
                 itemCount: myHand.length,
                 itemBuilder: (BuildContext context, int index) {
                   return GestureDetector(
                      onTap: () {
                       setState(() {
                         _clickedCard(index);
                       });
                     },
                     child: cardViewWidget(myHand[index]),
                   );
                 }),
          ),
        ],
      ),
    ),
  );
}}

如何在Flutter中删除自定义小部件之间的空格并适合ListView.builder中的小部件

1 个答案: