在Flutter中制作寬度和高度相等的方形容器形狀

如何制作應在所有螢屏設備（Android 和 iOS）中調整的等寬和等高的正方形。我試過了，但問題是容器在里面listview.builder。我也嘗試過，mediaquery但有些移動設備沒有出現在正方形中。所以為了解決這個問題，下面是示例飛鏢代碼。

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),
                                        ),
                                      ),
                                    ),
                                  ],
                                ),
                              ),
                            ),
                          ),
                        );
                      }),
            ),
          );
  }
}

uj5u.com熱心網友回復：

嘗試使用以下代碼

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

標籤：扑 镖 颤振布局

上一篇：無法更改flutter中的提示文本樣式。是什么原因？

下一篇：顫振計算器-如何在用戶除以零時顯示錯誤訊息