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

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