dart 全宽按钮内卡内行内列在 Flutter

ljsrvy3e 于 2023-09-28 发布在 Flutter

关注(0)|答案(2)|浏览(93)

Column(
        mainAxisSize: MainAxisSize.min,
        children: [
          Container(
            color: Colors.black,
            width: double.infinity,
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: awards
                  .map((award) => Card(
                        elevation: 3,
                        surfaceTintColor: Colors.white,
                        child: Padding(
                          padding: const EdgeInsets.symmetric(
                              horizontal: 8, vertical: 16.0),
                          child: Column(
                            mainAxisSize: MainAxisSize.min,
                            // crossAxisAlignment: CrossAxisAlignment.stretch, <--- Why this guy is breaking ? logic ? 
                            children: [
                              SizedBox(
                                // width: double.maxFinite, <--- So does this guy :(
                                child: OutlinedButton(
                                    onPressed: () {}, child: const Text("Hello")),
                              )
                            ],
                          ),
                        ),
                      ))
                  .toList(),
            ),
          ),
        ],
      ));

我试图传播的按钮宽度卡内排，但没有工作.我甚至不明白它为什么会断裂，它说它在盒子约束中断裂，因为它有无限的宽度

dart

来源：https://stackoverflow.com/questions/77078657/full-width-button-inside-card-inside-row-which-is-inside-column-in-flutter

2条答案

按热度按时间

disbfnqx1#

您可以使用LayoutBuilder来获取每张卡片的最大宽度

赞(0）回复(0）举报 2023-09-28

ifmq2ha22#

给你我相信这就是你想要的。这是最小可行代码，50行以下。我希望能成功。欢迎在下面的评论中提供感谢。

Column(
      mainAxisSize: MainAxisSize.min,
      children: <Widget>[
        Container(
          color: Colors.black,
          width: double.infinity,
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: <String>[
              "A 1",
              "A 2",
              "A 3",
              "A 4",
              "A 5",
            ].map(
              (String award) {
                return Expanded(
                  child: Card(
                    elevation: 3,
                    surfaceTintColor: Colors.white,
                    child: Padding(
                      padding: const EdgeInsets.symmetric(
                        horizontal: 8,
                        vertical: 16.0,
                      ),
                      child: Column(
                        mainAxisSize: MainAxisSize.min,
                        children: <Widget>[
                          SizedBox(
                            child: OutlinedButton(
                              onPressed: () {},
                              child: Text(award),
                            ),
                          )
                        ],
                      ),
                    ),
                  ),
                );
              },
            ).toList(),
          ),
        ),
      ],
    ),

赞(0）回复(0）举报 2023-09-28

我来回答

dart 全宽按钮内卡内行内列在 Flutter

2条答案

相关问题

热门标签

最新问答