flutter - Flutter中元素的shadow被另一个元素遮盖,如何解决？

Question

Flutter中元素的shadow被另一个元素遮盖

我希望的是第一个元素的右侧能够显示一个阴影,但是在使用Expanded后,这部分阴影就被遮盖了

import 'package:flutter/material.dart';import 'package:fluent_ui/fluent_ui.dart' as fluent;void main() {  runApp(const App());}class App extends StatefulWidget {  const App({super.key});  @override  State<StatefulWidget> createState() {    return _App();  }// This widget is the root of your application.}class _App extends State<App> {  @override  Widget build(BuildContext context) {    return const fluent.FluentApp(      title: "test",      home: MainPage(title: "MainTitle"),      debugShowCheckedModeBanner: false,    );  }}class MainPage extends StatelessWidget {  const MainPage({super.key, required this.title});  // This widget is the home page of your application. It is stateful, meaning  // that it has a State object (defined below) that contains fields that affect  // how it looks.  // This class is the configuration for the state. It holds the values (in this  // case the title) provided by the parent (in this case the App widget) and  // used by the build method of the State. Fields in a Widget subclass are  // always marked "final".  final String title;  @override  Widget build(BuildContext context) {    return Scaffold(      body: Row(        children: [          Container(            width: 64,            decoration: const BoxDecoration(                color: Color.fromRGBO(244, 244, 244, 1),                boxShadow: [                  BoxShadow(                    color: Color.fromRGBO(0, 0, 0, 0.5),                    offset: Offset(1, 0),                    blurRadius: 4,                    spreadRadius: 0,                  )                ]),            child: const Menu(),          ),          Expanded(              child: Container(            height: double.infinity,            decoration:                const BoxDecoration(color: Color.fromRGBO(243, 243, 243, 1)),            child: Text("test"),          ))        ],      ),    );  }}class Menu extends StatefulWidget {  const Menu({super.key});  @override  State<StatefulWidget> createState() {    return _Menu();  }}class _Menu extends State<Menu> {  @override  Widget build(BuildContext context) {    return Container(      width: 64,      decoration: const BoxDecoration(          color: Color.fromRGBO(243, 243, 243, 1),          boxShadow: [            BoxShadow(              color: Color.fromRGBO(0, 0, 0, 0.5),              offset: Offset(1, 0),              blurRadius: 4,              spreadRadius: 0,            )          ]),      child: Column(        children: [          fluent.IconButton(              icon: const Icon(                Icons.home,                color: Color.fromRGBO(67, 67, 67, 1),                size: 42,              ),              onPressed: () {                print("object");              })        ],      ),    );  }}

试过用stack的方式,但是我需要第二个元素填满整个窗口,stack里面似乎没有办法用Expanded。

Answer 1

row的children中添加一个 sizedBox 然后再设置width

Answer 2

在 Flutter 中，如果一个元素的阴影被另一个元素遮盖，通常是因为阴影被包含在另一个元素的范围内。在你的代码中，Expanded 元素占据了整个 Row，因此它包含在其范围内的任何元素的阴影都被它自身遮挡。

要解决这个问题，你可以使用 Positioned 元素在 Stack 中创建浮动层，这样即使 Expanded 元素占据整个空间，阴影也能显示在它上面。下面是一个修改后的示例代码：

import 'package:flutter/material.dart';import 'package:fluent_ui/fluent_ui.dart' as fluent;void main() {  runApp(const App());}class App extends StatefulWidget {  const App({super.key});  @override  State<StatefulWidget> createState() {    return _App();  }}class _App extends State<App> {  @override  Widget build(BuildContext context) {    return const fluent.FluentApp(      title: "test",      home: MainPage(title: "MainTitle"),      debugShowCheckedModeBanner: false,    );  }}class MainPage extends StatelessWidget {  const MainPage({super.key, required this.title});  final String title;  @override  Widget build(BuildContext context) {    return Scaffold(      body: Stack(        children: [          Container(            width: 64,            decoration: const BoxDecoration(                color: Color.fromRGBO(244, 244, 244, 1),                boxShadow: [                  BoxShadow(                    color: Color.fromRGBO(0, 0, 0, 0.5),                    offset: Offset(1, 0),                    blurRadius: 4,                    spreadRadius: 0,                  )                ]),            child: const Menu(),          ),          Positioned( // 使用 Positioned 元素来放置阴影层，使其浮在 Expanded 元素之上。            top: 0, // 根据需要调整位置。            left: 0, // 根据需要调整位置。            child: Container( // 这里放置你的阴影层。你可以根据需要调整它的样式和内容。              height: double.infinity,              decoration: BoxDecoration(color: Colors.transparent), // 设置透明背景以使阴影可见。              child: Text("test"), // 你的内容。            ),          ),          Expanded( // 你的主要内容区域。它将在整个 Row 中展开。            child: Container( // 这只是一个示例，你可以根据需要调整样式和内容。              height: double.infinity,              decoration: BoxDecoration(color: Color.fromRGBO(243, 243, 243, 1)), // 这只是一个示例，你可以根据需要调整样式和内容。              child: Text("test"), // 这只是一个示例，你可以根据需要调整样式和内容。            ),          )        ],      ),    );  }}