Flutter中元素的shadow被另一个元素遮盖,如何解决?
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。
回复
1个回答

test
2024-06-23
row的children中添加一个 sizedBox 然后再设置width
回复

适合作为回答的
- 经过验证的有效解决办法
- 自己的经验指引,对解决问题有帮助
- 遵循 Markdown 语法排版,代码语义正确
不该作为回答的
- 询问内容细节或回复楼层
- 与题目无关的内容
- “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容