问题描述
我想为这个容器使用 Inkwell splash.没有 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'),
],
),
),
),
),
),
我从容器中删除了 boxshadow 并添加了材质的高度,我得到了这样的结果.
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.
推荐答案
我通过用另一个 Container 小部件包装 Material 小部件来解决问题,然后我给这个容器提供了盒子阴影,我解决了我的问题.
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 不适用于 InkWell 材料的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!