flutter - 如有必要，允许行子级扩展，否则占用最小尺寸

Question

我写了一个Flutter package为社交平台提供登录按钮。这是一个外观示例:

我正在努力让这个按钮在 parent 让它拉伸(stretch)时看起来不错。例如，将此按钮放置在具有 CrossAxisAlignment.stretch 的列中。我希望图标和文本保持原样，并将空闲空间“添加”到右侧的蓝色。

从the code可以看出，这是一个带有 Icon 和 Text 的 RaisedButton，加上一些填充(按照 Google 的标准定义)。它使用 Row 和 MainAxisSize.min:

    // Code omitted for clarity (see link above for full version)
    ButtonTheme(
      child: RaisedButton(
        child: Row(
          mainAxisSize: MainAxisSize.min,
          children: <Widget>[
            Padding(
              padding: const EdgeInsets.all(1.0),
              child: Container(
                height: 38.0, 
                width: 38.0,
                child: Center(
                  child: Image(...),
                    height: 18.0,
                    width: 18.0,
                  ),
                ),
              ),
            ),

            SizedBox(width: 14.0),
            Padding(
              padding: const EdgeInsets.fromLTRB(0.0, 8.0, 8.0, 8.0),
              child: Text("Sign in with Google"),
            ),
          ],
        ),
      ),
    );

我尝试将 Spacer 添加到该行作为最终小部件，但这会导致该行总是扩展以填充其父级。相反，我希望它仅在父级强制时才填充父级。

对于如何解决这个问题有什么建议吗？

Answer 1

您可以使用 Align 小部件作为您的 RaisedButton 的父级，如下所示:

         child: Align(
                alignment: Alignment.centerLeft,
                child: RaisedButton(
                  onPressed: onPressed,
                  color: darkMode ? Color(0xFF4285F4) : Colors.white,
                  child: Row(
                    mainAxisSize: MainAxisSize.min,

使用这个，你的 Row 不会展开 :)

或

如果你想根据父部件展开按钮，请使用 LayoutBuilder:

         @override
          Widget build(BuildContext context) {
            return LayoutBuilder(
              builder: (context, constraints) {
                return ButtonTheme(
                  height: 40.0,
                  padding: const EdgeInsets.all(0.0),
                  shape: RoundedRectangleBorder(
                    // Google doesn't specify a border radius, but this looks about right.
                    borderRadius: BorderRadius.circular(3.0),
                  ),
                  child: Align(
                    alignment: Alignment.centerLeft,
                    child: RaisedButton(
                      onPressed: onPressed,
                      color: darkMode ? Color(0xFF4285F4) : Colors.white,
                      child: Row(
                        mainAxisSize: MainAxisSize.min,
                        children: <Widget>[
                          // The Google design guidelines aren't consistent. The dark mode
                          // seems to have a perfect square of white around the logo, with a
                          // thin 1dp (ish) border. However, since the height of the button
                          // is 40dp and the logo is 18dp, it suggests the bottom and top
                          // padding is (40 - 18) * 0.5 = 11. That's 10dp once we account for
                          // the thin border.
                          //
                          // The design guidelines suggest 8dp padding to the left of the
                          // logo, which doesn't allow us to center the image (given the 10dp
                          // above). Something needs to give - either the 8dp is wrong or the
                          // 40dp should be 36dp. I've opted to increase left padding to 10dp.
                          Padding(
                            padding: const EdgeInsets.all(1.0),
                            child: Container(
                              height: 38.0, // 40dp - 2*1dp border
                              width: 38.0, // matches above
                              decoration: BoxDecoration(
                                color: Colors.white,
                                borderRadius: BorderRadius.circular(3.0),
                              ),
                              child: Center(
                                child: Image(
                                  image: AssetImage(
                                    "graphics/google-logo.png",
                                    package: "flutter_auth_buttons",
                                  ),
                                  height: 18.0,
                                  width: 18.0,
                                ),
                              ),
                            ),
                          ),

                          SizedBox(width: 14.0 /* 24.0 - 10dp padding */),
                          Padding(
                            padding: const EdgeInsets.fromLTRB(0.0, 8.0, 8.0, 8.0),
                            child: Text(
                              text,
                              style: TextStyle(
                                fontSize: 18.0,
                                fontFamily: "Roboto",
                                fontWeight: FontWeight.w500,
                                color: darkMode
                                    ? Colors.white
                                    : Colors.black.withOpacity(0.54),
                              ),
                            ),
                          ),
                          constraints.minWidth == 0 ? SizedBox.shrink() : Spacer(),
                        ],
                      ),
                    ),
                  ),
                );
              },
            );
          }