Question

我正在使用以下代码并被删除。我想设置容器的高度，以使容器内显示的图像适应得当。在当前状态下，图像安装在容器内，并且看起来不太好。我已使用网格视图显示Firebase中的图像。

class Catview extends StatefulWidget {
  @override
  _CatviewState createState() => _CatviewState();
}

class _CatviewState extends State<Catview> {
  StreamSubscription<QuerySnapshot> subscription;
  List<DocumentSnapshot> wallpaperList;
  final CollectionReference collectionReference =
      Firestore.instance.collection("pubg");

  @override
  void initState() {
    super.initState();
    subscription = collectionReference.snapshots().listen((datasnapshot) {
      setState(() {
        wallpaperList = datasnapshot.documents;
      });
    });
  }

  @override
  void dispose() {
    super.dispose();
    subscription?.cancel();
  }

  @override
  Widget build(BuildContext context) {
    return (SafeArea(
      child: Scaffold(
        body: wallpaperList != null
            ? GridView.builder(
                gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                  crossAxisCount: 2,
                  crossAxisSpacing: 2,
                  mainAxisSpacing: 4,
                ),
                itemCount: wallpaperList.length,
                itemBuilder: (context, index) {
                  String image = wallpaperList[index].data['image'];
                  return Container(
                    color: Colors.red,
                    child: Image.network(
                      image,
                    ),
                  );
                },
              )
            : Center(
                child: CircularProgressIndicator(),
              ),
      ),
    ));
  }
}

谢谢！

Answer 1

您需要在SliverGridDelegateWithFixedCrossAxisCount中添加属性childAspectRatio。 childAspectRatio作为aspectRatio，因为在gridview中无法支持高度和宽度。除非您使用此库“交错网格视图”。 https://pub.dev/packages/flutter_staggered_grid_view。

如果您使用不带库的gridview，这是示例。

示例：

GridView.builder(
                gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                  crossAxisCount: 2,
                  crossAxisSpacing: 2,
                  mainAxisSpacing: 4,
                  childAspectRatio: 0.7,
                ),
....

Answer 2

您必须使用GridView.builder类中存在的childAspectRatio属性

GridView.builder(
                gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                  crossAxisCount: 2,
                  crossAxisSpacing: 8.0,
                  mainAxisSpacing: 8.0,
                  childAspectRatio: 2/3,
                ),
....

我喜欢使用摄影中常见的2/3（2：3）或3/4（3：4）的长宽比来获得我通常喜欢的外观。

如果您想要相对于高度的较宽宽度，请根据需要反向使用宽高比（即3/2或4/3）。

希望有帮助！：）

在Gridview.builder中设置容器的高度

2 个答案: