英文:
Container BoxShadow not working with InkWell Material
问题
我想在这个容器上使用Inkwell溅墨效果。
不使用Inkwell小部件。
Expanded(
child: Container(
padding: EdgeInsets.all(12.0),
decoration: BoxDecoration(
boxShadow: [
BoxShadow(
color: Colors.black26,
offset: Offset(0, 1),
blurRadius: 2.0,
)
],
borderRadius: BorderRadius.circular(12.0),
color: _size.white,
),
child: Column(
children: <Widget>[
Icon(
Icons.book,
color: _size.green,
),
SizedBox(
height: 4.0,
),
Text('Instant'),
],
),
),
),
但是当我添加Inkwell和Material小部件时，看起来像这样：
Expanded(
child: Material(
color: _size.white,
child: InkWell(
borderRadius: BorderRadius.circular(12.0),
onTap: () {},
splashColor: Colors.red,
splashFactory: InkSplash.splashFactory,
child: Container(
padding: EdgeInsets.all(12.0),
decoration: BoxDecoration(
boxShadow: [
BoxShadow(
color: Colors.black26,
offset: Offset(0, 1),
blurRadius: 2.0,
)
],
borderRadius: BorderRadius.circular(12.0),
//color: _size.white,
),
child: Column(
children: <Widget>[
Icon(
Icons.book,
color: _size.green,
),
SizedBox(
height: 4.0,
),
Text('Instant'),
],
),
),
),
),
),
我从容器中删除了boxshadow并为Material添加了elevation，得到了这样的效果：
Expanded(
child: Material(
borderRadius: BorderRadius.circular(12.0),
elevation: 2.0,
color: _size.white,
child: InkWell(
borderRadius: BorderRadius.circular(12.0),
onTap: () {},
splashColor: Colors.red,
splashFactory: InkSplash.splashFactory,
child: Container(
padding: EdgeInsets.all(12.0),
decoration: BoxDecoration(
/*boxShadow: [
BoxShadow(
color: Colors.black26,
offset: Offset(0, 1),
blurRadius: 2.0)
],*/
borderRadius: BorderRadius.circular(12.0),
//color: _size.white,
),
child: Column(
children: <Widget>[
Icon(
Icons.book,
color: _size.green,
),
SizedBox(
height: 4.0,
),
Text('Instant'),
],
),
),
),
),
)
最后，这看起来与我所需的类似，但在容器的顶部，阴影或elevation不像第一张图那样。有人知道如何获得像第一张图片那样的阴影。
英文:
I want to use Inkwell splash for this container.
Without Inkwell widget.
Expanded(
child: Container(
padding: EdgeInsets.all(12.0),
decoration: BoxDecoration(
boxShadow: [
BoxShadow(
color: Colors.black26,
offset: Offset(0, 1),
blurRadius: 2.0)
],
borderRadius: BorderRadius.circular(12.0),
color: _size.white,
),
child: Column(
children: <Widget>[
Icon(
Icons.book,
color: _size.green,
),
SizedBox(
height: 4.0,
),
Text('Instant'),
],
),
),
),
But when i add inkwell and material widget it looks like
Expanded(
child: Material(
color: _size.white,
child: InkWell(
borderRadius: BorderRadius.circular(12.0),
onTap: () {},
splashColor: Colors.red,
splashFactory: InkSplash.splashFactory,
child: Container(
padding: EdgeInsets.all(12.0),
decoration: BoxDecoration(
boxShadow: [
BoxShadow(
color: Colors.black26,
offset: Offset(0, 1),
blurRadius: 2.0)
],
borderRadius: BorderRadius.circular(12.0),
//color: _size.white,
),
child: Column(
children: <Widget>[
Icon(
Icons.book,
color: _size.green,
),
SizedBox(
height: 4.0,
),
Text('Instant'),
],
),
),
),
),
),
I removed boxshadow from container and added elevation for material and i got like this.
Expanded(
child: Material(
borderRadius: BorderRadius.circular(12.0),
elevation: 2.0,
color: _size.white,
child: InkWell(
borderRadius: BorderRadius.circular(12.0),
onTap: () {},
splashColor: Colors.red,
splashFactory: InkSplash.splashFactory,
child: Container(
padding: EdgeInsets.all(12.0),
decoration: BoxDecoration(
/*boxShadow: [
BoxShadow(
color: Colors.black26,
offset: Offset(0, 1),
blurRadius: 2.0)
],*/
borderRadius: BorderRadius.circular(12.0),
//color: _size.white,
),
child: Column(
children: <Widget>[
Icon(
Icons.book,
color: _size.green,
),
SizedBox(
height: 4.0,
),
Text('Instant'),
],
),
),
),
),
)
finally it similar to what i need but in top of the container that coming shadow or elevation is not like needed one.
Anyone how to get shadow like first image.
答案1
得分: 19
[![输入图像描述][1]][1]
我通过将Material小部件包装在另一个Container小部件中，并为这个Container小部件添加阴影来解决了我的问题。
```dart
Expanded(
child: Container(
decoration: BoxDecoration(
boxShadow: [
BoxShadow(
color: Colors.black26,
offset: Offset(0, 1),
blurRadius: 2.0,
),
],
borderRadius: BorderRadius.circular(12.0),
color: _size.white,
),
child: Material(
borderRadius: BorderRadius.circular(12.0),
color: _size.white,
child: InkWell(
borderRadius: BorderRadius.circular(12.0),
onTap: () {},
splashColor: Colors.red,
splashFactory: InkSplash.splashFactory,
child: Container(
padding: EdgeInsets.all(12.0),
child: Column(
children: <Widget>[
Icon(
Icons.book,
color: _size.green,
),
SizedBox(
height: 4.0,
),
Text('Instant'),
],
),
),
),
),
),
),
<details>
<summary>英文:</summary>
[![enter image description here][1]][1]
I solved by wrapping Material widget by another Container widget and i give box shadow to this container, and i resolved my problem.
Expanded(
child: Container(
decoration: BoxDecoration(
boxShadow: [
BoxShadow(
color: Colors.black26,
offset: Offset(0, 1),
blurRadius: 2.0)
],
borderRadius: BorderRadius.circular(12.0),
color: _size.white,
),
child: Material(
borderRadius: BorderRadius.circular(12.0),
color: _size.white,
child: InkWell(
borderRadius: BorderRadius.circular(12.0),
onTap: () {},
splashColor: Colors.red,
splashFactory: InkSplash.splashFactory,
child: Container(
padding: EdgeInsets.all(12.0),
child: Column(
children: <Widget>[
Icon(
Icons.book,
color: _size.green,
),
SizedBox(
height: 4.0,
),
Text('Instant'),
],
),
),
),
),
),
),
[1]: https://i.stack.imgur.com/xsdGs.jpg
</details>
# 答案2
**得分**: 1
尝试使用 **`Card`** 这种方式：
```dart
Card(
elevation: 10.0,
child: Container(
padding: EdgeInsets.all(12.0),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(12.0),
),
child: Column(
children: <Widget>[
Icon(
Icons.book,
color: Colors.blue,
),
SizedBox(
height: 4.0,
),
Text('Instant'),
],
),
),
)
输出
英文:
Try this way using Card
Card(
elevation: 10.0,
child: Container(
padding: EdgeInsets.all(12.0),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(12.0),
),
child: Column(
children: <Widget>[
Icon(
Icons.book,
color: Colors.blue,
),
SizedBox(
height: 4.0,
),
Text('Instant'),
],
),
))
OUTPUT
答案3
得分: 0
在使用Inkwell时，请使用Ink代替Material，然后为内部的Container添加颜色（默认情况下是透明的，只显示底部的阴影）：
Expanded(
child: Ink(
color: _size.white,
child: InkWell(
...
child: Container(
decoration: BoxDecoration(
color: Color.white,
...
),
...
),
),
),
),
英文:
Use Ink instead of Material when using Inkwell, then give the internal Container a color (it's transparent by default, just showing the shadow underneath):
Expanded(
child: Ink(
color: _size.white,
child: InkWell(
...
child: Container(
decoration: BoxDecoration(
color: Color.white,
...
),
...
),
),
),
),
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论