用于显示图像的颤动布局

Posted 2021-04-13

任何人都可以建议如何创建布局如下所示使用flutter显示图像。 1个大方形，5个小方块，必须根据屏幕宽度进行相应调整。

答案

在这种情况下，您可以使用flutter_staggered_grid_view包。

在pubspec.yaml中导入包。

dependencies:

 ...

   flutter_staggered_grid_view: ^0.2.2

请遵循以下代码以获得交错的网格视图。

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      theme: new ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: new HomePage(),
    );
  }
}


class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: new AppBar(
        title: new Text("Demo"),
      ),
      body: new Padding(
          padding: const EdgeInsets.only(top: 12.0),
          child: new StaggeredGridView.count(
            crossAxisCount: 3,
            staggeredTiles: _staggeredTiles,
            children: _tiles,
            mainAxisSpacing: 4.0,
            crossAxisSpacing: 4.0,
            padding: const EdgeInsets.all(4.0),
          )
      )
    );
  }
}


List<StaggeredTile> _staggeredTiles = const <StaggeredTile>[
  const StaggeredTile.count(2, 2),
  const StaggeredTile.count(1, 1),
  const StaggeredTile.count(1, 1),
  const StaggeredTile.count(1, 1),
  const StaggeredTile.count(1, 1),
  const StaggeredTile.count(1, 1),
];

List<Widget> _tiles = const <Widget>[
  const _Example01Tile(Colors.green, Icons.widgets),
  const _Example01Tile(Colors.lightBlue, Icons.wifi),
  const _Example01Tile(Colors.amber, Icons.panorama_wide_angle),
  const _Example01Tile(Colors.brown, Icons.map),
  const _Example01Tile(Colors.deepOrange, Icons.send),
  const _Example01Tile(Colors.indigo, Icons.airline_seat_flat),
];



class _Example01Tile extends StatelessWidget {
  const _Example01Tile(this.backgroundColor, this.iconData);

  final Color backgroundColor;
  final IconData iconData;

  @override
  Widget build(BuildContext context) {
    return new Card(
      color: backgroundColor,
      child: new InkWell(
        onTap: () {},
        child: new Center(
          child: new Padding(
            padding: const EdgeInsets.all(4.0),
            child: new Icon(
              iconData,
              color: Colors.white,
            ),
          ),
        ),
      ),
    );
  }
}

另一答案

Widget build(BuildContext context) {
final width = MediaQuery.of(context).size.width;

return new Container(
  child: new Column(
    children: <Widget>[
      new Row(children: <Widget>[
        new Container(
          width: 2*width/4,
          height: 2*width/4,
          color: Colors.lightGreen,
        ),
        new Column(children: <Widget>[
          new Container(
            width: width/4,
            height: width/4,
            color: Colors.redAccent,
          ),
          new Container(
            width: width/4,
            height: width/4,
            color: Colors.red,
          )
        ],)
      ],),
      new Row(children: <Widget>[
        new Container(
          width: width/4,
          height: width/4,
          color: Colors.black54,
        ),
        new Container(
          width: width/4,
          height: width/4,
          color: Colors.redAccent,
        ),
        new Container(
          width: width/4,
          height: width/4,
          color: Colors.green,
        ),
      ],)
    ],
  ),
);
}