Question

我写了一个Flutter package，其中提供了社交平台的登录按钮。这是一个看起来像的例子：

当父母将其拉伸时，我正努力使此按钮看起来不错。例如，将此按钮放在带有CrossAxisAlignment.stretch的列中。我希望图标和文本保持原样，并且将备用空间“添加”到右侧的蓝色。

从the code中可以看到，这是一个RaisedButton，其中包含Icon和Text，外加一些填充（由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将不会扩展:)

OR

如果要根据父窗口小部件展开按钮，请使用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(),
                        ],
                      ),
                    ),
                  ),
                );
              },
            );
          }

如有必要，允许行子展开，否则占用最小尺寸

1 个答案: