2

我正在创建一个搜索小部件，我希望它有一点高度，我可以通过使用 Material 小部件来做到这一点，但 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),
          ],
        ),
      ),
    ),
  );
}

这是我的小部件的样子：

在此处输入图像描述

4

3 回答 3

4

作为一种解决方法，您可以使用 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),
            ],
          ),
        ),
    );
  }

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

于 2020-01-23T07:42:35.437 回答
0

您仍然可以使用 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),
          ],
        ),
      ),
    ),
  );
}

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

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

于 2020-08-27T09:41:37.140 回答
0

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

于 2020-08-27T09:49:27.907 回答