Flutter - 如何设置自定义的 Scaffold 宽度和高度

Question

我知道存在MediaQuery的解决方案，但是我想限制我的Scaffold大小，以便它也可以用于基于Web的应用程序。就像Instagram所拥有的那样，有人能帮助我吗？

- Arnav

---

您也可以使用'AspectRatio'来在每个平台上保持应用程序的纵横比。这可以防止某些小部件破裂，使UI无响应。您可以将AspectRatio与媒体查询一起使用，例如获取视口的可用高度并将该高度设置为SizedBox的高度，最后将AspectRatio添加为该SizedBox的子项。 - Rashid Wassan

我建议您使用带有媒体查询的SizedBox和Container作为子元素。我看到的模式是Row：带有图像和SizedBox、文本字段和按钮的SizedBox，一个GridView，最后是选项卡导航。也许表单上有五个部分。 - Golden Lion

你能否在GridView中滚动屏幕，还是它只是一个单页面应用程序？GridView可以包含在SizedBox中，使其保持在单个页面上。 - Golden Lion

Answer 1

你尝试将Scaffold包裹在具有minimum属性的SafeArea中，并设置EdgeInsets.all(32.0)吗？

这对我而言可以在任何屏幕上重现你的模拟效果。

示例代码：

//...
return SafeArea(

  minimum: const EdgeInsets.all(32.0),

  child: Scaffold(
    //...
  ),
);
//...

- daddy7860

---

我认为这个解决方案让Chrome网页应用栏看起来很奇怪。 - Golden Lion

所以这个可以工作，但是用户界面响应很慢。 - Arnav

@Arnav 如果你在谈论动态屏幕尺寸，那么是的，如果完全按原样使用，它不会响应屏幕尺寸，但你总是可以使用MediaQuery功能，如此处所示，除非你指的是其他方式？ - daddy7860

Answer 2

遇到了同样的问题，这个方法可以解决：将你的底部表单放在一个脚手架和安全区域中。

SafeArea(
bottom: false, // this to remove default bottom padding
//this should be your desired padding height from top to all background page still show
minimum: EdgeInsets.only(top: MediaQuery.of(context).size.height *0.09),
child: Scaffold(
backgroundColor:
Colors.transparent,
extendBody: true,
resizeToAvoidBottomInset: true,
body: YourBottomSheetContent()))

- Ifeoluwa Afuwape

Answer 3

我使用了SizedBox来创建单页外观的层。GridView不会缩小到窗口的大小，而是启用滚动条。我的解决方案适用于Chrome网页。

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.purple,
        buttonTheme: const ButtonThemeData(
          textTheme:ButtonTextTheme.primary,
          buttonColor:Colors.yellow,
        )
      ),
      home:  Test_SinglePage(),
    );
  }
}
class DataRecord{
  String name;
  String number;
  DataRecord(this.name,this.number);
}
class Test_SinglePage extends StatefulWidget {
  Test_SinglePage({Key? key}) : super(key: key);

  @override
  State<Test_SinglePage> createState() => _Test_SinglePageState();
}


class _Test_SinglePageState extends State<Test_SinglePage> {
   List<DataRecord> lstData=[
    DataRecord("A","1"),    DataRecord("B","2"),    DataRecord("C","3"),    DataRecord("D","4"),
    DataRecord("E","5"),    DataRecord("F","6"),    DataRecord("G","7"),    DataRecord("H","8"),
    DataRecord("I","9"),    DataRecord("J","10"),    DataRecord("K","11"),    DataRecord("L","12"),
    DataRecord("M","13"),    DataRecord("N","14"),    DataRecord("O","15"),    DataRecord("P","16"),
    DataRecord("Q","17"),    DataRecord("R","18"),    DataRecord("S","19"),    DataRecord("T","20"),
    DataRecord("V","21"),    DataRecord("X","22"),    DataRecord("Y","23"),    DataRecord("Z","24"),
  ];

  Widget _dialogBuilder(BuildContext context, String name)
  {
      return SimpleDialog(
        contentPadding:EdgeInsets.zero,
        children:[
        Container(width:80,height:80,child:
        Column(children:[
        Text(name),
        SizedBox(height:20),
        Expanded(child:Row(
          mainAxisAlignment: MainAxisAlignment.end,
          crossAxisAlignment: CrossAxisAlignment.end,
          children: [ElevatedButton(onPressed:(){ Navigator.of(context).pop();}, child: 
            Text("Close"))
          ],))
        ])
        )]);
  }

  Widget _itemBuilder(BuildContext context,int index)
   {
     return
     GestureDetector(
       onTap:()=>showDialog(context:context,builder:(context)=>_dialogBuilder(context,lstData[index].name)),
      child:Container(color:Colors.grey,child:GridTile(child: Center(child:
     Column(children:[
     Text(lstData[index].name,style:Theme.of(context).textTheme.headline2),
     Text(lstData[index].number,style:Theme.of(context).textTheme.headline4)
     ])
     ))));
   }

  @override
  Widget build(BuildContext context) {
    return Scaffold(appBar: AppBar(title:Text("Single Page")),body: 
    Container(
      margin: const EdgeInsets.only(top:20.0, left: 20.0, right: 20.0, bottom:10.0),
      child:
      Flex(
        direction: Axis.vertical,
        mainAxisAlignment: MainAxisAlignment.start,
        children: [

          SingleChildScrollView(
            scrollDirection: Axis.horizontal,
            child:Row(
            mainAxisAlignment: MainAxisAlignment.start,
            children:[
              
            FittedBox(
                fit:BoxFit.fitHeight,
              child:SizedBox(
                width:200,
                height:200,
                child: Image.asset("assets/images/apple.jpg"),
              )),
              Column(
                mainAxisAlignment:MainAxisAlignment.start,
                children:[
              Row(

              children: [
                SizedBox(height:100,width:200,child:Container(color:Colors.red,child:Text("reached"))),
                SizedBox(height:100,width:200,child:Container(color:Colors.blue,child:Text("reached2"))),
                SizedBox(height:100,width:200,child:Container(color:Colors.green,child:Text("reached3")))
              ],),
              Row(children: [
                 SizedBox(width:600, child:ElevatedButton(
                   
                   onPressed:(){

                  },child:Text("Press Me")))],)

              ])
          ])),
      
      Expanded(child:SizedBox(
        height:400,
        width:MediaQuery.of(context).size.width,child:
      GridView.builder(
      gridDelegate: const SliverGridDelegateWithMaxCrossAxisExtent(
                maxCrossAxisExtent: 300,
                childAspectRatio: 3 / 2,
                crossAxisSpacing: 20,
                mainAxisSpacing: 20),
      itemCount: lstData.length,
      itemBuilder: _itemBuilder
      )))],)
    ,));
  }
}

- Golden Lion