容器的宽度在 CustomScrollView 中的 SliverToBoxAdapter 内不起作用

Dev*_*per 2 flutter flutter-layout flutter-web

我有一个 CustomScrollView 包含一个 SliverToBoxAdapter。我给的宽度为MediaQuery.of(context).size.width / 1.75。但它需要屏幕的全宽度。 在此输入图像描述。如果容器放置在 Customscrollview 之外,则容器的宽度有效。

class ProfileView extends GetView<ProfileController> {
  const ProfileView({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {

    return Scaffold(
            backgroundColor: Colors.white,
            body: Row(children: [
             Expanded(
                    child: CustomScrollView(
                      shrinkWrap: true,

                      slivers: [
                        SliverToBoxAdapter(
                          child: Padding(
                            padding:
                            const EdgeInsets.only(top: 40.0, left: 45),
                            child: Container(
                              padding: EdgeInsets.only(top: 30),
                              width: MediaQuery.of(context).size.width / 1.75,
                              decoration: BoxDecoration(
                                border:
                                Border.all(color: Colors.red, width: 0.7),
                                color: Color(0xfffbfbfa),
                              ),
                              child: Stack(
                                children: [
                                  Positioned(
                                    right: 0,
                                    top: 0,
                                    child: Align(
                                      alignment: Alignment.topRight,
                                      child: MouseRegion(
                                        cursor: SystemMouseCursors.click,
                                        child: Padding(
                                          padding: const EdgeInsets.only(
                                              right: 18.0),
                                          child: Text(
                                            "Edit",
                                            textAlign: TextAlign.left,
                                            style: GoogleFonts.inter(
                                                color: AppColors.primaryColor,
                                                fontSize: 13,
                                                letterSpacing:
                                                0

,
                                                fontWeight: FontWeight.w400,
                                                height: 1.5769230769230769),
                                          ),
                                        ),
                                      ),
                                    ),
                                  ),
                                  Text("Text"),

                                ],
                              ),
                            ),
                          ),
                        )
                      ],
                    ),
                  )
            ])
          
            );
  }
Run Code Online (Sandbox Code Playgroud)

joh*_*ohn 7

你必须用Align这样的小部件包装你的容器:

  SliverToBoxAdapter(
                    child: Padding(
                      padding: const EdgeInsets.only(top: 40.0, left: 45),
                      child: Align(
                        alignment: Alignment.center,
                        child: Container(
                          padding: const EdgeInsets.only(top: 30),
                         width: MediaQuery.of(context).size.width / 1.75,
                          decoration: BoxDecoration(
                            border: Border.all(color: Colors.red, width: 0.7),
                            color: Colors.amber,
                          ),
....
Run Code Online (Sandbox Code Playgroud)