在颤动中显示带有网格视图的图像

Question

我尝试使用 StaggeredGridView，但它不会在我的页面上加载任何内容，甚至不仅仅是文本。我还没有放图片网址，因为我想测试一下。

到目前为止，这是我的以下代码：

 body: ListView(
          children: [
            Container(
              width: deviceSize.width,
              height: 650,
              child: Stack(
                alignment: AlignmentDirectional.center,
                children: [
                  Image.asset(
                    'assets/Big Sur.jpg',
                    width: deviceSize.width,
                    fit: BoxFit.cover,
                  ),
                  Stack(
                    children: [
                      Text(
                        """\n\n\nA decentralized photography platform\nfor the devoted communities.""",
                        style: TextStyle(
                          color: Colors.white,
                          fontSize: 30,
                        ),
                      ),
                      Text(
                        'PhoBlock',
                        style: TextStyle(
                          fontWeight: FontWeight.bold,
                          color: Colors.white,
                          fontSize: 80,
                        ),
                      )
                    ],
                  ),
                ],
              ),
            ),
            SizedBox(
              height: 50,
            ),
            StaggeredGridView.countBuilder(
              crossAxisCount: 4,
              itemBuilder: (BuildContext context, int index) {
                return Container(
                  color: Colors.green,
                  child: new Center(
                    child: new CircleAvatar(
                      backgroundColor: Colors.white,
                      child: new Text('$index'),
                    ),
                  ),
                );
              },
              staggeredTileBuilder: (int index) {
                return StaggeredTile.count(2, index.isEven ? 2 : 1);
              },
              mainAxisSpacing: 4.0,
              crossAxisSpacing: 4.0,
            ),

这是来自 Scaffold 小部件的主体。请帮助我，因为我正在尝试弄清楚如何使用这个新的 StaggeredGridView 小部件...

Answer 1

您可以在下面复制粘贴运行完整代码
您可以使用Column 和Expanded 来控制大小
代码sn-p

Column(mainAxisSize: MainAxisSize.min, children: [
      Expanded(
        child: Container(
          width: deviceSize.width,
          //height: 650,
          child: Stack(
           ...
      ),
      SizedBox(
        height: 50,
      ),
      Expanded(
        flex: 1,
        child: StaggeredGridView.countBuilder(

工作演示

完整代码

import 'package:flutter/material.dart';
import 'package:flutter_staggered_grid_view/flutter_staggered_grid_view.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      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) {
    var deviceSize = MediaQuery.of(context).size;

    return Scaffold(
        appBar: AppBar(
          title: Text(widget.title),
        ),
        body: Column(mainAxisSize: MainAxisSize.min, children: [
          Expanded(
            child: Container(
              width: deviceSize.width,
              //height: 650,
              child: Stack(
                alignment: AlignmentDirectional.center,
                children: [
                  Image.network(
                    'https://picsum.photos/250?image=9',
                    width: deviceSize.width,
                    fit: BoxFit.cover,
                  ),
                  Stack(
                    children: [
                      Text(
                        """\n\n\nA decentralized photography platform\nfor the devoted communities.""",
                        style: TextStyle(
                          color: Colors.white,
                          fontSize: 30,
                        ),
                      ),
                      Text(
                        'PhoBlock',
                        style: TextStyle(
                          fontWeight: FontWeight.bold,
                          color: Colors.white,
                          fontSize: 80,
                        ),
                      )
                    ],
                  ),
                ],
              ),
            ),
          ),
          SizedBox(
            height: 50,
          ),
          Expanded(
            flex: 1,
            child: StaggeredGridView.countBuilder(
              crossAxisCount: 4,
              itemBuilder: (BuildContext context, int index) {
                return Container(
                  color: Colors.green,
                  child: Center(
                    child: CircleAvatar(
                      backgroundColor: Colors.white,
                      child: Text('$index'),
                    ),
                  ),
                );
              },
              staggeredTileBuilder: (int index) {
                return StaggeredTile.count(2, index.isEven ? 2 : 1);
              },
              mainAxisSpacing: 4.0,
              crossAxisSpacing: 4.0,
            ),
          ),
        ]));
  }
}

工作演示 2

完整代码2

import 'package:flutter/material.dart';
import 'package:flutter_staggered_grid_view/flutter_staggered_grid_view.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      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) {
    var deviceSize = MediaQuery.of(context).size;

    return Scaffold(
        appBar: AppBar(
          title: Text(widget.title),
        ),
        body: LayoutBuilder(builder: (context, constraints) {
          return SingleChildScrollView(
            child: ConstrainedBox(
              constraints: constraints.copyWith(
                minHeight: constraints.maxHeight,
                maxHeight: double.infinity,
              ),
              child: Column(mainAxisSize: MainAxisSize.min, children: [
                Container(
                  width: deviceSize.width,
                  height: 450,
                  child: Stack(
                    alignment: AlignmentDirectional.center,
                    children: [
                      Image.network(
                        'https://picsum.photos/250?image=9',
                        width: deviceSize.width,
                        fit: BoxFit.cover,
                      ),
                      Stack(
                        children: [
                          Text(
                            """\n\n\nA decentralized photography platform\nfor the devoted communities.""",
                            style: TextStyle(
                              color: Colors.white,
                              fontSize: 30,
                            ),
                          ),
                          Text(
                            'PhoBlock',
                            style: TextStyle(
                              fontWeight: FontWeight.bold,
                              color: Colors.white,
                              fontSize: 80,
                            ),
                          )
                        ],
                      ),
                    ],
                  ),
                ),
                SizedBox(
                  height: 50,
                ),
                Container(
                  height: 500,
                  child: StaggeredGridView.countBuilder(
                    crossAxisCount: 4,
                    itemBuilder: (BuildContext context, int index) {
                      return Container(
                        color: Colors.green,
                        child: Center(
                          child: CircleAvatar(
                            backgroundColor: Colors.white,
                            child: Text('$index'),
                          ),
                        ),
                      );
                    },
                    staggeredTileBuilder: (int index) {
                      return StaggeredTile.count(2, index.isEven ? 2 : 1);
                    },
                    mainAxisSpacing: 4.0,
                    crossAxisSpacing: 4.0,
                  ),
                ),
              ]),
            ),
          );
        }));
  }
}