在 Flutter 中制作宽度和高度相等的方形容器形状

Question

如何制作在所有屏幕设备（Android & iOS）中都应调整的等宽等高的正方形。我试过了，但问题是容器在 listview.builder 里面。我也尝试使用 mediaquery 但一些移动设备没有出现在正方形中。所以要解决这个问题，下面是示例 dart 代码。

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        backgroundColor:Colors.black,
        body: Center(
          child: MyWidget(),
        ),
      ),
    );
  }
}

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    var height = MediaQuery.of(context).size.height;
    var width = MediaQuery.of(context).size.width;
    return AspectRatio(
            aspectRatio: 2.8 / 1,
            child: Container(
              child: ListView.builder(
                      scrollDirection: Axis.horizontal,
                      shrinkWrap: true,
                      itemCount: 3,
                      itemBuilder: (BuildContext context, int index) {
                        return SizedBox(
                          width: width * 0.30,
                          child: GestureDetector(
                            child: Padding(
                              padding: const EdgeInsets.only(right: 5.0),
                              child: Card(
                                elevation: 0,
                                child: Column(
                                  children: [
                                    ClipRRect(
                                      borderRadius: BorderRadius.only(
                                        topLeft: Radius.circular(5),
                                        topRight: Radius.circular(5),
                                      ),
                                      child: AspectRatio(
                                        aspectRatio: 1 / 1,
                                        child: Padding(
                                          padding: const EdgeInsets.all(5.0),
                                          child: Container(),
                                        ),
                                      ),
                                    ),
                                    Padding(
                                      padding: const EdgeInsets.only(
                                          left: 2.0, right: 2.0),
                                      child: FittedBox(
                                        fit: BoxFit.fitWidth,
                                        child: Text(
                                          'Test',
                                          style: TextStyle(
                                              fontSize: 12.0),
                                        ),
                                      ),
                                    ),
                                  ],
                                ),
                              ),
                            ),
                          ),
                        );
                      }),
            ),
          );
  }
}

Answer 1

尝试使用以下代码

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    var height = MediaQuery.of(context).size.height;
    var width = MediaQuery.of(context).size.width;
    return AspectRatio(
      aspectRatio: 2.8 / 1,
      child: Container(
        child: ListView.builder(
            scrollDirection: Axis.horizontal,
            shrinkWrap: true,
            itemCount: 3,
            itemBuilder: (BuildContext context, int index) {
              return Padding(
                padding: const EdgeInsets.all(5.0),
                child: AspectRatio(
                  aspectRatio: 1,
                  child: Container(
                    color: Colors.green,
                  ),
                ),
              );
            }),
      ),
    );
  }
}