要给 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 中的弧度添加阴影效果了。

Flutter 弧度添加阴影效果教程 - 完整代码示例

原文地址: https://www.cveoy.top/t/topic/f2q9 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录