将屏幕分成两个相等的部分 [英] divide screen into two equal parts in flutter
本文介绍了将屏幕分成两个相等的部分的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
下面是我的屏幕，我正在尝试获取
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: Image.network(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 = "http://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.
推荐答案
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(
'https://placeimg.com/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),
);
这篇关于将屏幕分成两个相等的部分的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
