如何通过定位和填充小部件为平板电脑添加响应能力？

Question

我正在尝试在 LayoutBuilder 中使用 MediaQuery，并且对于所有 Positioned - Material 按钮，我需要为平板电脑、小型手机和大型手机添加不同的逻辑，并且我想通过 mediaQuery 为这些添加 if 和 else 语句

当我将这个 if 语句放在定位时，它显示错误。

@override
  Widget build(BuildContext context) {
    var deviceData = MediaQuery.of(context);
    double _width = MediaQuery.of(context).size.width;
    double _height = MediaQuery.of(context).size.height;
    var screenSize = MediaQuery.of(context).size;
    return LayoutBuilder(builder: (context, constraints) {
      return OrientationBuilder(builder: (context, orientation) {
      Size size = MediaQuery.of(context).size;
double width = size.width > size.height ? size.height : size.width;      
        if (MediaQuery.of(context).size.width > 600) {
          isLargeScreen = true;
        } else {
          isLargeScreen = false;
        }
        SizeConfig().init(constraints, orientation);


  Positioned (
                                // height: context.heightPct(.99),
                                // width: context.widthPct(.99),
                                // Container(
                                // alignment: Alignment(,-.3),
                                //  child:   FractionallySizedBox(
                                // widthFactor: 30,                      
                               if (isLargeScreen){
                                width: 213 * SizeConfig.imageSizeMultiplier,
                                height: 92 * SizeConfig.heightMultiplier,
                                  }else{
                                height: 92 * SizeConfig.heightMultiplier,
                                width: 213 * SizeConfig.imageSizeMultiplier,

 child: Opacity(
                                  opacity: 0.9,
                                  // left: width*0.5,
                                  // top: 900,
                                  // top: 100,
                                  child: _visible
                                      ? MaterialButton(
                                          // minWidth:screenSize.width*0.1,
                                          // 0.1 = 10% of the screen , 0.5 = 50% of the screen
                                          // ios sizes usually are 620...
                                          // height: screenSize.height*0.1,
                                          onPressed: () => changeTextArabic1(),
                                          onLongPress: () =>
                                              changeTextEnglish1(),
                                          // shape: new RoundedRectangleBorder(borderRadius: new BorderRadius.circular(60.0)
                                          // child: Text(labels[i]),
                                          // ),
                                          child: Ink(
                                            child: Text(surah0),
                                            //  disabledTextColor: Colors.transparent,
//                       color: Colors.cyan[300],
//                       // color: Colors.purple[300],
//                       highlightColor: Colors.blue,
//                       // shape: new RoundedRectangleBorder(borderRadius: new BorderRadius.circular(60.0)
//                       // ),
//                       textColor: Colors.white,
                                            // color: Colors.cyan[400],

                                            padding: EdgeInsets.all(21.0),
                                            // padding: EdgeInsets.only(
                                            //     left: 28,
                                            //     top: 25,
                                            //     right: 28,
                                            //     bottom: 25),
                                            decoration: BoxDecoration(
                                              gradient: LinearGradient(
                                                colors: [
// all together looks COOL royal Blue:
                                                  Colors.red,
                                                  Colors.blue,
                                                  // Color(0xff374ABE),
                                                  // Color(0xff64B6FF),
                                                  // Color(0xff0E0077),
                                                  // Color(0xff1B00EE)
                                                ],
                                                // begin: Alignment.centerLeft,
                                                // end: Alignment.centerRight,
                                              ),
                                            ),
                                          ),
                                          // color: Colors.blue[300],
                                          // highlightColor: Colors.blue,
                                          // ),
                                          textColor: Colors.white,
                                        )
                                      : Container(),
                                  // ),

                                  //  ):Container()
                                ),
      
                                  }),
                            

Answer 1

你可以使用：

isLargeScreen 
? Positioned()
: Positioned()

或：

Positioned(
  height: isLargeScreen ? something : something,
  width: isLargeScreen ? something : something
)