有没有办法在不使用材料小部件的情况下提升小部件的颤动？

Posted 2023-02-23

【中文标题】有没有办法在不使用材料小部件的情况下提升小部件的颤动？

【英文标题】：Is there any way to elevate a widget in flutter without using material widget?

【发布时间】：2020-05-09 10:08:26

【问题描述】：

我正在创建一个搜索小部件，我希望它有一点高度，我可以通过使用 Material 小部件来做到这一点，但是 Material 也有其他属性，比如颜色，当我用材料包裹我的容器时它会产生奇怪的边缘小部件。

Widget search(BuildContext context) 
  var theme = Provider.of<ThemeNotifier>(context);
  return Container(
    margin: EdgeInsets.only(top: 28, left: 10, right: 10),
    child: Material(
      elevation: 10,
      child: Container(
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(20),
          color: theme.getTheme().materialTheme.buttonColor,
        ),
        padding: EdgeInsets.all(10),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: <Widget>[
            InkWell(onTap: () => print("Menu tapped"), child: Icon(Icons.menu)),
            Expanded(
              child: TextField(
                decoration: InputDecoration(
                    contentPadding: EdgeInsets.only(left: 15, right: 15),
                    hintText: "Search City",
                    filled: false,
                    border: InputBorder.none),
              ),
            ),
            Icon(Icons.search),
          ],
        ),
      ),
    ),
  );

这是我的小部件的外观：

【问题讨论】：

您可以通过移除 Row 小部件并将 suffixIcon 和 prefixIcon 添加到 TextField 的 InputDecoration 来进一步简化您的代码。作为示例，您可以查看此处：***.com/a/50123879/10544887 看看这是否也适合您。

【参考方案1】：

作为一种解决方法，您可以使用 BoxShadow 而不是材质高度。

  Widget search(BuildContext context) 
    return Container(
      margin: EdgeInsets.only(top: 28, left: 10, right: 10),
      child: Container(
          decoration: BoxDecoration(
            boxShadow: [
              BoxShadow(blurRadius: 5.0, spreadRadius: 1.0, color: Colors.grey.shade400)
            ],
            borderRadius: BorderRadius.circular(20),
            color: Colors.grey.shade200,
          ),
          padding: EdgeInsets.all(10),
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: <Widget>[
              InkWell(onTap: () => print("Menu tapped"), child: Icon(Icons.menu)),
              Expanded(
                child: TextField(
                  decoration: InputDecoration(
                      contentPadding: EdgeInsets.only(left: 15, right: 15),
                      hintText: "Search City",
                      filled: false,
                      border: InputBorder.none),
                ),
              ),
              Icon(Icons.search),
            ],
          ),
        ),
    );
  

^ 替换主题提供者的颜色。

【讨论】：

谢谢它确实有效，但让我们看看我们是否能找到更好的解决方案。

【参考方案2】：

您仍然可以使用 Material 来包装您的小部件，而不会出现那些不需要的边缘。您需要做的就是为您的 Material 小部件指定 shape 属性，在您的情况下使用 RoundedRectangleBorder，如下所示：

Widget search(BuildContext context) 
  var theme = Provider.of<ThemeNotifier>(context);
  return Container(
    margin: EdgeInsets.only(top: 28, left: 10, right: 10),
    child: Material(
      shape: RoundedRectangleBorder(  // Add these lines
                  borderRadius: BorderRadius.circular(22.0),), // change radius to whatever you want
      elevation: 10,
      child: Container(
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(20),
          color: theme.getTheme().materialTheme.buttonColor,
        ),
        padding: EdgeInsets.all(10),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: <Widget>[
            InkWell(onTap: () => print("Menu tapped"), child: Icon(Icons.menu)),
            Expanded(
              child: TextField(
                decoration: InputDecoration(
                    contentPadding: EdgeInsets.only(left: 15, right: 15),
                    hintText: "Search City",
                    filled: false,
                    border: InputBorder.none),
              ),
            ),
            Icon(Icons.search),
          ],
        ),
      ),
    ),
  );

您可以对 CircleBorder() 执行相同的操作，例如，如果您想包装 CircleAvatar 之类的东西或其他任何东西。

注意：仅当您还指定了大于 0 的高度时才会显示此阴影。

【参考方案3】：

如果您真的不想使用 Material 小部件，那么您可以摆脱它并将 Container 替换为 Card 小部件。这样，您还可以指定一个高程，因为 Card 具有该属性，如果您不喜欢圆角的默认半径，您还必须指定一个形状。