android - 在 flutter 中将屏幕分成两个相等的部分

Question

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

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

但我不知道如何将屏幕分成多个部分并为它们添加小部件。请帮我解决这个问题。

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

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}');
      }
    }
  }
}

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

Answer 1

使用 Expanded 小部件可以使 Row、Column 或 Flex 的子项展开以填充主轴中的可用空间(例如，水平方向用于 Row 或垂直方向用于 Column)。如果展开多个子项，则可用空间根据弹性因子在它们之间分配。

https://docs.flutter.io/flutter/widgets/Expanded-class.html

Column(
  children: <Widget>[
    Expanded(
      child: TopWidget()
    ),
    CenterWidget(),
    Expanded(
      child: BottomWidget()
    ),
  ]
)

编辑:完整源代码在这里

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);
  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {

  @override
  Widget build(BuildContext context) {
    return Column(
        children: <Widget>[
          Expanded(
              child: Container(
                color: Colors.green,
              )
          ),
          Container(
              height: 40,
              color: Colors.grey
          ),
          Expanded(
              child: Container(
                color: Colors.blueGrey,
              )
          ),
        ]
    );
  }
}

编辑 2:结果在这里