用于显示图像的 Flutter 布局

Posted 2023-02-23

【中文标题】用于显示图像的 Flutter 布局

【英文标题】：Flutter layout for displaying images

【发布时间】：2019-02-07 13:53:14

【问题描述】：

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

【问题讨论】：

你可以使用 column -> (row -> item - column -> item-item ) - (row -> item item item)

【参考方案1】：

在这种情况下，您可以使用 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,
            ),
          ),
        ),
      ),
    );
  

【讨论】：

感谢您介绍flutter_staggered_grid_view。它既灵活又好。

【参考方案2】：

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

【讨论】：

测试了代码，但需要将宽度和高度除以 3 而不是 4。简短而简单的解决方案，无需导入任何其他包即可工作。

您可以将宽度和高度划分为任何您想要的比例，这只是一个示例代码。