Question

我在Flutter应用中实现了卡片。每张卡都需要一个自定义BoxShadow。怎么办呢？

我到目前为止尝试的是将Card()属性添加到0构造函数中，这不起作用...

Answer 1

Card窗口小部件没有装饰属性，因此您需要在Container内制作卡片，然后将BoxShadow应用于容器，

示例：

class mycard extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Container(
      child: new Card(
        child: new Center(
          child: new Icon(
            Icons.refresh,
            size: 150.0,
          ),
        ),
      ),
      decoration: new BoxDecoration(boxShadow: [
        new BoxShadow(
          color: Colors.black,
          blurRadius: 20.0,
        ),
      ]),
    );
  }
}

Answer 2

当主要谈论阴影时，可以通过调整 blurness 和 color 来改变阴影的外观。

因此您无需编写额外的代码行就可以执行此类操作。

Card(
  elevation: 4,  // Change this 
  shadowColor: Colors.black12,  // Change this 
  child: Center(child: Text('Hey, dude.')),
),

Answer 3

查看“卡片”小部件

      @override
      Widget build(BuildContext context) {
        return Scaffold(
            backgroundColor: Color(0xFFdde0e3),
            body: SingleChildScrollView(
              child: Container(
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.stretch,
                  children: <Widget>[
                    Card(
                      elevation:5,
                      margin: EdgeInsets.fromLTRB(0.0, 0.0, 0.0, 16.0),
                      shape: RoundedRectangleBorder(
                        borderRadius: BorderRadius.circular(0.0),
                      ),
                      child: Container(
                        height: 200,
                      ),
                    )
                  ],
                ),
              ),
            ));
      }

Answer 4

通过获取boxShadow属性，将卡简单地包装在容器中，以将阴影应用于卡小部件。

        new Container(
        width: 100,
        height: 100,
        decoration: new BoxDecoration(
    boxShadow: [
      BoxShadow(
        color: Colors.grey.withOpacity(.5),
        blurRadius: 20.0, // soften the shadow
        spreadRadius: 0.0, //extend the shadow
        offset: Offset(
          5.0, // Move to right 10  horizontally
          5.0, // Move to bottom 10 Vertically
        ),
      )
    ],
),

将自定义boxshadow添加到Flutter卡

4 个答案: