无法使用 Column() flutter 将我的小部件置于容器中

Question

这张照片是我的 step1

当我使用 Column() 时，我的设计不是中心 :( 观看 -> step2

当我包裹在 Column() 中时我也无法按下它并且我没有看到任何错误:

 Expanded(
                child: Padding(
                  padding: const EdgeInsets.all(10),
                  child: Container(
                    decoration: BoxDecoration(
                      borderRadius: BorderRadius.circular(12),
                      color: colorMars,
                    ),
                    height: 200,
                    child: Column(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: [
                        IconButton(
                            icon: const FaIcon(
                              FontAwesomeIcons.mars,
                              size: 80,
                            ),
                            onPressed: () {
                              colorMars = active;
                              if (colorMars == active) {
                                colorVenus = inActive;
                              } else {
                                colorMars = inActive;
                              }

                              setState(() {});
                            }),
                      ],
                    ),
                  ),
                ),
              ),

PS图标我用这个包font_awesome_flutter 在 pubspec.yaml:

dependencies:
  flutter:
    sdk: flutter
  font_awesome_flutter: ^10.1.0

这里全是代码 -> full_code

Answer 1

在您的 IconButton 中添加 iconSize: 80。完整代码为

 Expanded(
                child: Padding(
                  padding: const EdgeInsets.all(10),
                  child: Container(
                    decoration: BoxDecoration(
                      borderRadius: BorderRadius.circular(12),
                      color: colorMars,
                    ),
                    height: 200,
                    child: Column(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: [
                        IconButton(
                            iconSize: 80,
                            icon: const FaIcon(
                              FontAwesomeIcons.mars,
                            ),
                            onPressed: () {
                              colorMars = active;
                              if (colorMars == active) {
                                colorVenus = inActive;
                              } else {
                                colorMars = inActive;
                              }

                              setState(() {});
                            }),
                      ],
                    ),
                  ),
                ),
              ),

基于IconButtondocumentation

When creating an icon button with an Icon, do not override the icon's size with its Icon.size parameter, use the icon button's iconSize parameter instead. For example do this:

IconButton(iconSize: 72, icon: Icon(Icons.favorite), ...)

Avoid doing this:

IconButton(icon: Icon(Icons.favorite, size: 72), ...)

If you do, the button's size will be based on the default icon size, not 72, which may produce unexpected layouts and clipping issues.

如果您在不添加 IconButton 大小的情况下使用大小 80 覆盖 FaIcon，则 FaIcon 将大于其父级 (IconButton)，并且您会得到意想不到的布局。