flutter给弧度加上阴影
要给Flutter中的弧度添加阴影效果,可以使用Container组件和BoxDecoration组件来实现。
首先,创建一个Container组件,并设置其宽度和高度:
Container(
width: 100,
height: 100,
)
然后,设置Container的装饰效果,使用BoxDecoration组件来实现:
Container(
width: 100,
height: 100,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(50), // 设置弧度,这里设置为50即可
boxShadow: [
BoxShadow(
color: Colors.grey.withOpacity(0.5), // 设置阴影颜色
spreadRadius: 5, // 阴影扩散半径
blurRadius: 7, // 阴影模糊半径
offset: Offset(0, 3), // 阴影偏移量
),
],
),
)
最后,将Container组件添加到你的界面中即可看到带有阴影效果的弧度。
完整代码示例:
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: Scaffold(
appBar: AppBar(
title: Text('Flutter Shadow on BorderRadius'),
),
body: Center(
child: Container(
width: 100,
height: 100,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(50),
boxShadow: [
BoxShadow(
color: Colors.grey.withOpacity(0.5),
spreadRadius: 5,
blurRadius: 7,
offset: Offset(0, 3),
),
],
),
),
),
),
);
}
}
这样就可以给Flutter中的弧度添加阴影效果了。
原文地址: https://www.cveoy.top/t/topic/jde0 著作权归作者所有。请勿转载和采集!