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

作者站长头像
站长
· 阅读数 19

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个回答
avatar
test
2024-06-23

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

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