将屏幕分成两个相等的部分

本文介绍了将屏幕分成两个相等的部分的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

下面是我的屏幕，我正在尝试获取

Below is my screen, I am trying to get

body: SafeArea( child: Column( children: <Widget>[ Expanded(child: Chewie( controller: _chewieController, ) ), TabBar( labelColor:Colors.black, tabs: categoryNames, ), Expanded( child:TabBarView( children: [ ImageList() ], ), ), ], ) ), ),

但是我不知道如何将屏幕分成多个部分并为其添加小部件.请帮助我.

But I am not getting how to divide a screen into parts and adding widgets for them. Please help me with this.

以上是到目前为止我尝试过的代码.

Above is my code what I have tried so far.

class ImageList extends StatelessWidget { final List<SubContentsDatum>images = []; //ImageModel data = new ImageModel(); //ImageList(); Widget build(context) { fetchSubCategoryContentlist(context, 20); print('iamgelist:$images'); print('imagelistlengthimages:${images.length}'); return Expanded( child: GridView.count( shrinkWrap: true, childAspectRatio: 2, scrollDirection: Axis.vertical, crossAxisCount: 2, children: new List<Widget>.generate(images.length, (index) { return buildImage(images[index], context, index); }, ).toList(), ), ); } Widget buildImage(SubContentsDatum image, BuildContext context, int index) { return SingleChildScrollView( padding: EdgeInsets.only(top: 20.0), child: Column( children: <Widget>[ new InkResponse( child: Imagework(image.thumbnailUrl.replaceAll( "onnet-video-platform", "xxxxx")), onTap: () { Navigator.push(context, MaterialPageRoute(builder: (context) => ChewieDemo.fromChewieDemo(subContentsData: images[index],))); }, ), Text(image.name, style: TextStyle( color: Colors.white ), ), ], ), ); } Future<SubContentModel> fetchSubCategoryContentlist(BuildContext context, int value) async { String url = "xxxx:xx/onnet_api/mediaListByCatId.php"; var body = Map<String, String>(); body['publisherid'] = 102.toString(); body['tag'] = "media"; body['subtag'] = "list"; body['catId'] = value.toString(); http.Response res = await http.post(url, body: body); final data = json.decode(res.body); var map = Map<String, dynamic>.from(data); var subCategoryContentsResponse = SubContentModel.fromJson(map); if (res.statusCode == 200) { if (subCategoryContentsResponse.status == 1) { var subData = data['data'] as List; print('subcontentsresponse:$subData'); for (var model in subData) { images.add(new SubContentsDatum.fromJson(model)); } print('playerlengthimages:${images.length}'); } } } }

这是我的图像列表类文件，我尝试了所有人所说的内容，但没有得到输出.请检查此代码一次.

This is my imagelist class file I tried what all of you said but I didn't get the output.Please check with this code once.

推荐答案

您可以使用- MediaQuery 来获取屏幕的大小，然后将其除以2得到前一半.

You can Use - MediaQuery to get the size of screen then divide it by 2 to get the First half.

@override Widget build(BuildContext context) { return MaterialApp( title: title, // theme: ThemeData.light().copyWith( // platform: _platform ?? Theme.of(context).platform, // ), home: DefaultTabController( length: 3, child: Scaffold( // appBar: AppBar( // title: Text(title), // ), body: SafeArea( child: Column(children: <Widget>[ Container( color: Colors.greenAccent, height: MediaQuery.of(context).size.height / 2.2, // Also Including Tab-bar height. // child: Chewie( // controller: _chewieController, // ), ), PreferredSize( preferredSize: Size.fromHeight(50.0), child: TabBar( labelColor: Colors.black, tabs: [ Tab( text: 'One', ), Tab( text: 'Two', ), Tab( text: 'Three', ) ], // list of tabs ), ), //TabBarView(children: [ImageList(),]) Expanded( child: TabBarView( children: [ Container( color: Colors.deepOrange, child: Center(child: Text('Tab1')), ), Container( color: Colors.red, child: Center(child: Text('Tab2')), ), Container( color: Colors.yellowAccent, child: Center(child: Text('Tab3')), ) // class name ], ), ), ]))))); }

输出:

使用AppBar-height: MediaQuery.of(context).size.height / 2.5,

with AppBar - height: MediaQuery.of(context).size.height / 2.5,

中的GridView.builder中带有GridView.builder

Expanded( child: TabBarView( children: [ GridView.builder( itemBuilder: (context, int) { return CircleAvatar( backgroundImage: NetworkImage( 'placeimg/640/480/any'), ); }, itemCount: 20, gridDelegate: SliverGridDelegateWithFixedCrossAxisCount( crossAxisCount: 3), shrinkWrap: true, ), Container( color: Colors.red, child: Center(child: Text('Tab2')), ), Container( color: Colors.yellowAccent, child: Center(child: Text('Tab3')), ) // class name ], ), ),

提取异步数据-使用-FutureBuilder

to fetch async data - use - FutureBuilder

@override Widget build(BuildContext context) { return FutureBuilder( builder: (context,snap){ if(snap.hasData){ return Expanded( child: GridView.count( shrinkWrap: true, childAspectRatio: 2, scrollDirection: Axis.vertical, crossAxisCount: 2, children: new List<Widget>.generate(images.length, (index) { return buildImage(images[index], context, index); }, ).toList(), ), ); } return Center(child: CircularProgressIndicator()) }, future: fetchSubCategoryContentlist(context, 20), );