Flutter Wrap Widget 不会自行扩展

Posted 2023-02-23

【中文标题】Flutter Wrap Widget 不会自行扩展

【英文标题】：Flutter Wrap Widget does not expand itself

【发布时间】：2021-10-03 02:13:46

【问题描述】：

我正在尝试创建一个日历，并且我正在使用 Wrap 小部件在日历中显示日期。但是我遇到了一个问题。 Wrap 小部件不会将自身扩展到每一侧，这就是溢出发生的原因。这是我的代码：

    return Container(
      height: MediaQuery.of(context).size.height * 0.40,
      width: MediaQuery.of(context).size.width / 2,
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(46.0),
        color: Color(0xFFD6D6D6),
        boxShadow: [
          BoxShadow(
            color: Color(0xFF000000).withOpacity(0.16),
            offset: Offset(0, 10),
            blurRadius: 20.0,
          ),
        ],
      ),
      child: Column(
        children: [
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceAround,
            children: [
              SizedBox(width: 8.0),
              GestureDetector(
                onTap: () ,
                child: Icon(
                  Icons.arrow_back_ios,
                  color: Colors.white,
                ),
              ),
              Text(
                '$getMonthName(initialDate.month)',
                style: GoogleFonts.baloo(
                  color: Colors.white,
                  fontSize: 50.0,
                  fontWeight: FontWeight.w400,
                ),
              ),
              GestureDetector(
                onTap: () ,
                child: Icon(
                  Icons.arrow_forward_ios,
                  color: Colors.white,
                ),
              ),
              SizedBox(width: 8.0),
            ],
          ),
          Container(
            height: MediaQuery.of(context).size.height * 0.25,
            width: MediaQuery.of(context).size.width / 2.5,
            child: Row(
              children: [
                Wrap(
                  alignment: WrapAlignment.start,
                  direction: Axis.horizontal,
                  spacing: 2.0,
                  children: dayList == null
                      ? SizedBox()
                      : dayList.map((e) 
                          return DaysContainer(
                            number: e,
                          );
                        ).toList(),
                ),
              ],
            ),
          ),
        ],
      ),
    );

当我删除 Wrap 中的上部 Row 时，即使我定义了 Axis.horizo​​ntal，这次小部件也只会变为垂直。

DaysContainer 类：

class DaysContainer extends StatelessWidget 
  const DaysContainer(Key key, this.number, this.isAvailable)
      : super(key: key);

  final String number;
  final bool isAvailable;

  @override
  Widget build(BuildContext context) 
    return Container(
      padding: EdgeInsets.all(8.0),
      decoration: BoxDecoration(
        color: Color(0xFFFFFFFF),
      ),
      child: Center(
        child: Text(
          number,
          style: GoogleFonts.baloo(
            fontSize: 30.0,
            color: Color(0xFFBFBFBF),
            fontWeight: FontWeight.w400,
          ),
        ),
      ),
    );
  

这是 Flutter Web 中的结果：

预期结果：

谁能帮我弄清楚 Wrap 小部件的问题是什么？

【参考方案1】：

请通过以下更改更改您的代码：

删除了Row 外的Wrap 小部件 定义了DaysContainer 的宽度。目前，DaysContainer 中Container 的宽度具有父窗口小部件的全宽度。这就是为什么即使您在 Wrap 小部件中定义 Axis.horizo​​ntal，您的时间小部件也会变为垂直的原因。

顺便说一句，您可以将属性 runSpacing 和 spacing 添加到您的 Wrap 小部件中，以便在水平和垂直方向的项目之间留出更多空间，而不是使用填充。

【参考方案2】：

尝试更改为：

      Container(
        height: MediaQuery.of(context).size.height * 0.25,
        width: MediaQuery.of(context).size.width / 2.5,
        child: Wrap(
          alignment: WrapAlignment.start,
          direction: Axis.horizontal,
          spacing: 2.0,
          children: dayList == null
              ? SizedBox()
              : dayList.map((e) 


...


class DaysContainer extends StatelessWidget 
  const DaysContainer(Key key, this.number, this.isAvailable)
      : super(key: key);

  final String number;
  final bool isAvailable;

  @override
  Widget build(BuildContext context) 
    return Container(
                        width: 20,
                        height: 20,
                        margin: EdgeInsets.only(bottom: 2.0),
      padding: EdgeInsets.all(8.0),
      decoration: BoxDecoration(
        color: Color(0xFFFFFFFF),
      ),
      child: Center(
        child: Text(
          number,
          style: GoogleFonts.baloo(
            fontSize: 30.0,
            color: Color(0xFFBFBFBF),
            fontWeight: FontWeight.w400,
          ),
        ),
      ),
    );
  

【讨论】：

感谢您的解释。效果很好。