Блог

У меня возникла небольшая проблема с разделением экрана на 2 секции по вертикали, а затем обертыванием всей страницы буквой SingleChildScrollView А. Если ConstrainedBox столбцы не будут отображаться, есть ли какой-либо другой способ сделать это?, возникнут ли какие-либо проблемы с производительностью при использовании MediaQuery.of(context).size.height - AppBar().preferredSize.height для обертывания обоих разделов в ограниченном поле для расширения до высоты всего экрана?

 body: RefreshIndicator(  onRefresh: () async{  print('testing');  }, child: SingleChildScrollView(  physics: const BouncingScrollPhysics(  parent: AlwaysScrollableScrollPhysics()),  child: ConstrainedBox(  constraints: BoxConstraints(maxHeight: MediaQuery.of(context).size.height -  AppBar().preferredSize.height), //----------gt; I want to avoid using BoxConstraints  child: Padding(  padding: const EdgeInsets.only(left: 24.0, right: 24.0, top: 24.0),  child: Column(  mainAxisSize: MainAxisSize.min,  children: [  Container(  // flex: 1,  child: Container(  color: Colors.amber,  // height: 20 * SizeConfig.heightMultiplier,  child: Column(  mainAxisAlignment: MainAxisAlignment.start,  crossAxisAlignment: CrossAxisAlignment.stretch,  children: [  Container(  // height: 100.0,  // width: 100.0,  child: Text('teacher_photo_album_flow.listing_title'.tr(),  style: CustomTextStyle.pageSectionTitle(context),),  ),  SizedBox(  height: 2 * SizeConfig.heightMultiplier,  ),  GestureDetector(  onTap: (){    },  child: Container(  child: Column(children: [  Container(  height: 25 * SizeConfig.heightMultiplier,  // width: double.infinity,  width: double.infinity,  child: ClipRRect(  borderRadius: BorderRadius.circular(8.0),  child: Image.network(this.photoAlbums1[0]['album_cover'],  fit: BoxFit.cover,  width: MediaQuery.of(context).size.width,  ),  ),  ),  SizedBox(  height: 1.5 * SizeConfig.heightMultiplier,  ),  Row(  mainAxisAlignment: MainAxisAlignment.spaceBetween,  children: [  Expanded(  flex: 4,  child:   Container(  alignment: Alignment.centerLeft,  child: Text(this.photoAlbums1[0]['title'],  style: CustomTextStyle.titleOnelineEllipses(context),),  ),  ),  Expanded(  // flex: 1,  child:   Container(  alignment: Alignment.centerRight,  child: Text(this.photoAlbums1[0]['newDate'],  style: CustomTextStyle.silentTextDate(context),),  )  ,),  ],  ),  ],),  )  ),  SizedBox(  height: 3 * SizeConfig.heightMultiplier,  ),  ],  ),  ),  ),  photoAlbums2.length gt; 0 ? Expanded(  // flex: 2,  child: Container(  child: Column(  children: [   Expanded(  // flex: 2,  child: GridView.builder(  shrinkWrap: true,  primary: true,  physics: NeverScrollableScrollPhysics(),  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(  crossAxisSpacing: 1,  mainAxisSpacing: 1,  crossAxisCount: 2),  itemCount: this.photoAlbums2.length,  itemBuilder: (BuildContext ctx, i) {    return   GestureDetector(  onTap: (){   },  child: Container(   child: Column(children: [  Container(  height: 15 * SizeConfig.heightMultiplier,  // width: double.infinity,  width: double.infinity,  child: ClipRRect(  borderRadius: BorderRadius.circular(8.0),  child: Image.network(this.photoAlbums2[i]['album_cover'],  fit: BoxFit.cover,  width: MediaQuery.of(context).size.width,  ),  ),  ),  SizedBox(  height: 1.0 * SizeConfig.heightMultiplier,  ),  Container(  alignment: Alignment.centerLeft,  child: Text(this.photoAlbums2[i]['title'],  style: CustomTextStyle.titleOnelineEllipses(context),),  ),  SizedBox(  height: 0.5 * SizeConfig.heightMultiplier,  ),  Container(  alignment: Alignment.centerLeft,  child: Text(this.photoAlbums2[i]['newDate'],  style: CustomTextStyle.silentTextDate(context),),  ),  ],),  )  );    }    ),  ),]  ),  ),  ) : SizedBox(height: 0,)  ],),  ),  ), ), );  

Я использую LayoutBuilder , чтобы получить размер экрана.

 @override  Widget build(BuildContext context) {  return Scaffold(  body: LayoutBuilder(builder: (context, constraints) {  return RefreshIndicator(  onRefresh: () async {},  child: CustomScrollView(slivers: [  SliverToBoxAdapter(  child: Container(  color: Colors.green,  width: constraints.maxWidth,  height: constraints.maxHeight * .3,// amount of height you want or the widget you like to include with `ConstrainedBox`  ),  ),  SliverGrid.count(  crossAxisCount: 2,  children: [  ...List.generate(  11,  (index) =gt; Container(  color: index % 3 == 0 ? Colors.amber : Colors.cyanAccent,  ),  )  ],  ),  ]));  }),  );  }  

попробуйте это

 SingleChildScrollView(  child: Column(  mainAxisSize: MainAxisSize.min,  mainAxisAlignment: MainAxisAlignment.start,  crossAxisAlignment: CrossAxisAlignment.stretch,  children: [  Container(  child: Padding(  padding: EdgeInsets.all(20),  child: Text(''),  ),  color: Colors.red,  ),  SizedBox(  height: 10,  ),  Row(  mainAxisSize: MainAxisSize.min,  mainAxisAlignment: MainAxisAlignment.spaceBetween,  crossAxisAlignment: CrossAxisAlignment.start,  children: [  Expanded(  child: Container(    color: Colors.yellow,  child : Padding(  padding: EdgeInsets.all(20),),  ),  ),  SizedBox(width : 10,),  Expanded(  child: Container(     color: Colors.yellow,  child : Padding(  padding: EdgeInsets.all(20),),  ),  ),  ],  ),    SizedBox(height : 10),  Row(  mainAxisSize: MainAxisSize.min,  mainAxisAlignment: MainAxisAlignment.spaceBetween,  crossAxisAlignment: CrossAxisAlignment.start,  children: [  Expanded(  child: Container(    color: Colors.yellow,  child : Padding(  padding: EdgeInsets.all(20),),  ),  ),  SizedBox(width : 10,),  Expanded(  child: Container(     color: Colors.yellow,  child : Padding(  padding: EdgeInsets.all(20),),  ),  ),  ],  ),  SizedBox(height : 10),  Row(  mainAxisSize: MainAxisSize.min,  mainAxisAlignment: MainAxisAlignment.spaceBetween,  crossAxisAlignment: CrossAxisAlignment.start,  children: [  Expanded(  child: Container(    color: Colors.yellow,  child : Padding(  padding: EdgeInsets.all(20),),  ),  ),  SizedBox(width : 10,),  Expanded(  child: Container(     color: Colors.yellow,  child : Padding(  padding: EdgeInsets.all(20),),  ),  ),  ],  ),  ]),  )