问题描述
我想为此容器使用Inkwell飞溅.没有Inkwell小部件.
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.
推荐答案
我通过用另一个容器"小部件包装材料"小部件来解决此问题,并给该容器添加了阴影,然后我解决了问题.
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'),
],
),
),
),
),
),
),
这篇关于Container BoxShadow无法与InkVell材料一起使用的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!