颤振 ||在特定屏幕中更改 MediaQuery

Question

在我的 flutter 项目中，我制作了一个带页面的侧边栏，我想让它响应。所以我使用了媒体查询，但它是为整个页面配置的，我得到了错误“右溢出”。我想在页面中配置媒体查询而不计算侧边栏的权重。非常感谢任何帮助。

这是我的代码

ScrollNavigation(
                    bodyStyle: const NavigationBodyStyle(
                      background: Color(0xfff5f5f5),
                      scrollDirection: Axis.vertical,
                    ),
                    barStyle:  NavigationBarStyle(
                      position: NavigationPosition.left,
                      elevation: 2.0,
                      background: Colors.white,
                      activeColor: Color(0xff135888),
                      deactiveColor: Colors.grey,
                      verticalPadding: MediaQuery.of(context).size.width * 0.025,
                    ),
                    identiferStyle: const NavigationIdentiferStyle(
                      color: Color(0xff135888),
                    ),
                    pages: [
                      Container(
                        child: Column(
                          crossAxisAlignment: CrossAxisAlignment.center,
                          children: [
                            const SizedBox(height: 30),
                            Padding(
                              padding: const EdgeInsets.all(10),
                              child: Row(
                                children: <Widget>[
                                  Column(
                                    crossAxisAlignment: CrossAxisAlignment.end,
                                    children: [
                                      InkWell(
                                        onTap: () async {
                                          CategoryPage = false;
                                          webViewController?.loadUrl(
                                              'https://wikoget.com/product-category/electroniques/smart-devices/');
                                        },
                                        child: Text("See all",
                                          style: TextStyle(
                                            fontSize: MediaQuery.of(context).size.width * 0.03,
                                          ),),
                                      ),
                                      SizedBox(
                                          width : MediaQuery.of(context).size.width * 0.3, //<< Here the problem
                                          child: Divider(
                                          color: Color(0xffD1D1D1),
                                          height: 10,
                                          thickness: 1,
                                          indent: 2,
                                          endIndent: 2,
                                        ),
                                      ),
                                    ],
                                  ),
                                ],
                              ),
                            ),
                            ),
                          ],
                        ),
                      ),
                    items: const [
                      ScrollNavigationItem(icon: ImageIcon(
                        AssetImage('images/electro.png'),
                      ), title: "Electronique"),
                    ],
                  )

Answer 1

查看 LayoutBuilder。与获取设备大小的 MediaQuery 相比，您获取的是父窗口小部件的大小。

LayoutBuilder(
        builder: (BuildContext context, BoxConstraints constraints) {
          final width = constraints.maxWidth;
          return YourWidget(width: width * 0.9);
        },
      ),