如何在 flutter 中的灵活小部件之间添加 space

Question

我创建了一个自定义的灵活小部件，并调用了它 05 次，但是这些框彼此之间太近了，我想在它们之间添加 space，我使用了 wrap 小部件但是它工作。也使用了 spacer，但那也不起作用，当我更改 flex 值时，文本 1 的标题（如“无人值守”）被拆分。

这是我自定义的灵活代码

Widget customFlexibleWidget(flex, bgcolor, text1, text2, height, width) {
  return Flexible(
    flex: flex,
    child: Container(
      decoration: BoxDecoration(
          color: bgcolor, borderRadius: BorderRadius.all(Radius.circular(10))),
      height: height,
      width: width,
      child: Padding(
        padding: EdgeInsets.only(top: 15),
        child: Center(
          child: Column(
            children: <Widget>[
              Text(text1,
                  style: TextStyle(
                      fontFamily: 'montserrat',
                      fontSize: 10,
                      color: Colors.white,
                      fontWeight: FontWeight.w300)),
              Text(text2,
                  style: TextStyle(
                      fontFamily: 'montserrat',
                      fontSize: 15,
                      color: Colors.white,
                      fontWeight: FontWeight.w300)),
            ],
          ),
        ),
      ),
    ),
  );
}

并这样称呼它

Widget build(BuildContext context) {
    return SafeArea(
      child: Container(
        child:  Column(
            children: [
              Padding(
                padding: const EdgeInsets.all(8.0),
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    customFlexibleWidget(
                        10,
                        Colors.blue,
                        "Order",
                        "50",
                        MediaQuery.of(context).size.height * 0.12,
                        MediaQuery.of(context).size.width * 0.18),
                    customFlexibleWidget(
                        10,
                        Colors.blue,
                        "Cancelled",
                        "50",
                        MediaQuery.of(context).size.height * 0.12,
                        MediaQuery.of(context).size.width * 0.24),
                    customFlexibleWidget(
                        13,
                        Colors.blue,
                        "Unattended",
                        "50",
                        MediaQuery.of(context).size.height * 0.12,
                        MediaQuery.of(context).size.width * 0.25),
                    customFlexibleWidget(
                        7,
                        Colors.blue,
                        "Served",
                        "50",
                        MediaQuery.of(context).size.height * 0.12,
                        MediaQuery.of(context).size.width * 0.18),
                    Padding(
                      padding: const EdgeInsets.all(0.0),
                      child: customFlexibleWidget(
                          11,
                          Colors.blue,
                          "Remaining",
                          "50",
                          MediaQuery.of(context).size.height * 0.12,
                          MediaQuery.of(context).size.width * 0.25),
                    ),
                  ],
                ),
              ),
   ],
          ),
        ),
      ),
    );
  }
}

这是输出

请帮忙，如何做到这一点。

Answer 1

只需在两个小部件之间使用 Spacer 或 SizedBox(width:5,)

              customFlexibleWidget(
                        10,
                        Colors.blue,
                        "Cancelled",
                        "50",
                        MediaQuery.of(context).size.height * 0.12,
                        MediaQuery.of(context).size.width * 0.24),
                   Spacer(),
                    customFlexibleWidget(
                        13,
                        Colors.blue,
                        "Unattended",
                        "50",
                        MediaQuery.of(context).size.height * 0.12,
                        MediaQuery.of(context).size.width * 0.25),

在 customFlexibleWidget 中添加了填充，但最后一个和第一个小部件需要额外的 space

Widget customFlexibleWidget(flex, bgcolor, text1, text2, height, width) {
  return Flexible(
    flex: flex,
    child: Container(
      padding: EdgesInsect.only(left: 5, right: 5),//here added changes
      decoration: BoxDecoration(
          color: bgcolor, borderRadius: BorderRadius.all(Radius.circular(10))),
      height: height,
      width: width,
      child: Padding(
        padding: EdgeInsets.only(top: 15),
        child: Center(
          child: Column(
            children: <Widget>[
              Text(text1,
                  style: TextStyle(
                      fontFamily: 'montserrat',
                      fontSize: 10,
                      color: Colors.white,
                      fontWeight: FontWeight.w300)),
              Text(text2,
                  style: TextStyle(
                      fontFamily: 'montserrat',
                      fontSize: 15,
                      color: Colors.white,
                      fontWeight: FontWeight.w300)),
            ],
          ),
        ),
      ),
    ),
  );
}

Answer 2

给容器添加边距，这样你就可以得到一些 space 并在文本 eidget 上添加一个 fittedbox，这样“无人值守”就不会分裂

Widget customFlexibleWidget(flex, bgcolor, text1, text2, height, width) {
  return Flexible(
    flex: flex,
    child: Container(
       padding: EdgeInsets.only(top: 15),
       margin: EdgeInsets.only(left: 10, right: 10),
      decoration: BoxDecoration(
          color: bgcolor, borderRadius: BorderRadius.all(Radius.circular(10))),
      height: height,
      width: width,
      child:  Center(
          child: Column(
            children: <Widget>[
              Text(text1,
                  style: TextStyle(
                      fontFamily: 'montserrat',
                      fontSize: 10,
                      color: Colors.white,
                      fontWeight: FontWeight.w300)),
              Fittedbox(
                child: Text(text2,
                  style: TextStyle(
                      fontFamily: 'montserrat',
                      fontSize: 15,
                      color: Colors.white,
                      fontWeight: FontWeight.w300))),
            ],
          ),
      ),
    ),
  );
}

如何在 flutter 中的灵活小部件之间添加 space

how to add space between flexible widgets in flutter

flutter

row

space