在颤动的容器底部添加阴影?
Adding Shadows at the bottom of a container in flutter?
我有一个简单的屏幕,其中有一个大约 100 高的蓝色容器。我想在容器底部添加阴影或高程。
下面是我的代码
import 'package:flutter/material.dart';
import 'package:finsec/utils/strings.dart';
import 'package:finsec/utils/dimens.dart';
import 'package:finsec/utils/colors.dart';
void main() {
runApp(new IncomeFragment());
}
class IncomeFragment extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new Stack(
children: <Widget>[
new Container(
height: margin_100dp,
color: colorPrimary,
),
new Container( //container to overlay on top of blue container
alignment: Alignment.topCenter,
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Text(
zero_amount,
style: TextStyle(color: white, fontSize: 40.0, fontWeight: FontWeight.bold)
),
],
),
)
],
);
}
}
谁能帮我在蓝色容器的底部添加阴影或高程?
见下图。 shawdow应该在红圈的位置
提前致谢
使用容器影子如下:
decoration: BoxDecoration(
boxShadow: [
BoxShadow(
color: Colors.black,
offset: Offset(20.0, 10.0),
blurRadius: 20.0,
spreadRadius: 40.0,
),
],
),
根据需要控制blurRadius和Spread Radius
您可以重复使用 Stack 中的第一个容器,该容器有一个名为 decoration 的 属性 并且它接受一个 BoxDecoration 类型的小部件,如您在此 link 中所见: BoxDecoration
在这个小部件中,您可以使用 boxShadow 属性 为您的容器提供自定义阴影,尝试下一个代码:
new Container(
height: margin_100dp,
decoration: BoxDecoration(
boxShadow: <BoxShadow>[
BoxShadow(
color: Colors.black54,
blurRadius: 15.0,
offset: Offset(0.0, 0.75)
)
],
color: colorPrimary
),
),
或者您可以使用包含高程 属性 的 Material 小部件包裹您的 Container 小部件,以产生阴影效果。
Container(
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Material(
elevation: 15.0,
child: Container(
height: 100,
width: 100,
color: Colors.blue,
child: Center(child: Text("Material",style: TextStyle(color: Colors.white),)),
),
),
SizedBox(width: 100,),
Container(
height: 100,
width: 100,
decoration: BoxDecoration(
boxShadow: <BoxShadow>[
BoxShadow(
color: Colors.black54,
blurRadius: 15.0,
offset: Offset(0.0, 0.75)
)
],
color: Colors.blue
),
child: Center(child: Text('Box Shadow',style: TextStyle(color: Colors.white))),
),
],
),
),
图片:
两个小部件之间的区别如上所示。希望对您有所帮助!!!
是的,BoxShadow 可以解决这个问题,但不是手动添加 BoxShadow 列表,在 flutter 调用中有一个方便的地图 kElevationToShadow 将海拔键映射到 BoxShadow 的预定义列表。它也是基于material design elevation.
定义的
Container(
height: 60.0,
decoration: BoxDecoration(
boxShadow: kElevationToShadow[4],
color: Theme.of(context).bottomAppBarColor,
),
child: ...
);
如果你想让容器只有顶部有阴影
boxShadow: [
BoxShadow(
color: Color.fromARGB(255, 218, 218, 218),
blurRadius: 10.0, // soften the shadow
spreadRadius: 0.0, //extend the shadow
offset: Offset(
0.0, // Move to right 10 horizontally
-15.0, // Move to bottom 10 Vertically
),
)
],
Container(
margin: EdgeInsets.only(bottom: 7),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(10),
boxShadow: kElevationToShadow[2], // Use This kElevationToShadow ***********
),
child: Center(child: Text('With BoxShadow')),
),
Material( // Using Material Widget ***********************
elevation: 5,
borderRadius: BorderRadius.circular(10),
child: Container(
margin: EdgeInsets.only(bottom: 7),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(10),
),
child: Center(child: Text('With BoxShadow')),
),
),
我有一个简单的屏幕,其中有一个大约 100 高的蓝色容器。我想在容器底部添加阴影或高程。
下面是我的代码
import 'package:flutter/material.dart';
import 'package:finsec/utils/strings.dart';
import 'package:finsec/utils/dimens.dart';
import 'package:finsec/utils/colors.dart';
void main() {
runApp(new IncomeFragment());
}
class IncomeFragment extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new Stack(
children: <Widget>[
new Container(
height: margin_100dp,
color: colorPrimary,
),
new Container( //container to overlay on top of blue container
alignment: Alignment.topCenter,
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Text(
zero_amount,
style: TextStyle(color: white, fontSize: 40.0, fontWeight: FontWeight.bold)
),
],
),
)
],
);
}
}
谁能帮我在蓝色容器的底部添加阴影或高程?
见下图。 shawdow应该在红圈的位置
提前致谢
使用容器影子如下:
decoration: BoxDecoration(
boxShadow: [
BoxShadow(
color: Colors.black,
offset: Offset(20.0, 10.0),
blurRadius: 20.0,
spreadRadius: 40.0,
),
],
),
根据需要控制blurRadius和Spread Radius
您可以重复使用 Stack 中的第一个容器,该容器有一个名为 decoration 的 属性 并且它接受一个 BoxDecoration 类型的小部件,如您在此 link 中所见: BoxDecoration 在这个小部件中,您可以使用 boxShadow 属性 为您的容器提供自定义阴影,尝试下一个代码:
new Container(
height: margin_100dp,
decoration: BoxDecoration(
boxShadow: <BoxShadow>[
BoxShadow(
color: Colors.black54,
blurRadius: 15.0,
offset: Offset(0.0, 0.75)
)
],
color: colorPrimary
),
),
或者您可以使用包含高程 属性 的 Material 小部件包裹您的 Container 小部件,以产生阴影效果。
Container(
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Material(
elevation: 15.0,
child: Container(
height: 100,
width: 100,
color: Colors.blue,
child: Center(child: Text("Material",style: TextStyle(color: Colors.white),)),
),
),
SizedBox(width: 100,),
Container(
height: 100,
width: 100,
decoration: BoxDecoration(
boxShadow: <BoxShadow>[
BoxShadow(
color: Colors.black54,
blurRadius: 15.0,
offset: Offset(0.0, 0.75)
)
],
color: Colors.blue
),
child: Center(child: Text('Box Shadow',style: TextStyle(color: Colors.white))),
),
],
),
),
图片:
两个小部件之间的区别如上所示。希望对您有所帮助!!!
是的,BoxShadow 可以解决这个问题,但不是手动添加 BoxShadow 列表,在 flutter 调用中有一个方便的地图 kElevationToShadow 将海拔键映射到 BoxShadow 的预定义列表。它也是基于material design elevation.
定义的Container(
height: 60.0,
decoration: BoxDecoration(
boxShadow: kElevationToShadow[4],
color: Theme.of(context).bottomAppBarColor,
),
child: ...
);
如果你想让容器只有顶部有阴影
boxShadow: [
BoxShadow(
color: Color.fromARGB(255, 218, 218, 218),
blurRadius: 10.0, // soften the shadow
spreadRadius: 0.0, //extend the shadow
offset: Offset(
0.0, // Move to right 10 horizontally
-15.0, // Move to bottom 10 Vertically
),
)
],
Container(
margin: EdgeInsets.only(bottom: 7),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(10),
boxShadow: kElevationToShadow[2], // Use This kElevationToShadow ***********
),
child: Center(child: Text('With BoxShadow')),
),
Material( // Using Material Widget ***********************
elevation: 5,
borderRadius: BorderRadius.circular(10),
child: Container(
margin: EdgeInsets.only(bottom: 7),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(10),
),
child: Center(child: Text('With BoxShadow')),
),
),