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/f2q9 著作权归作者所有。请勿转载和采集!