尝试实现此布局的问题

Question

我正在尝试使用 flutter 为网站设计以下布局，但我无法找出正确的模式。

我尝试了很多列和行的可能性；我也尝试过使用堆栈，但无论我使用什么，3-4 都不会变得可滚动，或者 5 不会占据给定的高度。是否有实施此布局的解决方法？

Answer 1

有一个 github 设计响应式屏幕的项目。

github link Flutter-Responsive-Admin-Panel-or-Dashboard

Answer 2

使用这个

  Scaffold(
        resizeToAvoidBottomInset: false,
        body: Container(
          height: (MediaQuery.of(context).size.height) / 2,
          child: Stack(
            children: [
              Row(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Expanded(
                    flex: 2,
                    child: Column(
                      children: [
                        Container(
                            margin: EdgeInsets.all(4),
                            width: double.infinity,
                            height: (MediaQuery.of(context).size.height) / 8,
                            child: SizedBox(
                              height: 1,
                              width: 1,
                              child: const ColoredBox(color: Colors.amber),
                            )),
                        Row(
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: [
                            Expanded(
                              flex: 2,
                              child: Container(
                                  margin: EdgeInsets.all(4),
                                  height:
                                      (MediaQuery.of(context).size.height) / 3,
                                  child: SizedBox(
                                    height: 1,
                                    width: 1,
                                    child:
                                        const ColoredBox(color: Colors.amber),
                                  )),
                            ),
                            Expanded(
                              flex: 1,
                              child: Container(
                                  margin: EdgeInsets.all(4),
                                  height: (MediaQuery.of(context).size.height) /
                                      7.5,
                                  child: SizedBox(
                                    height: 1,
                                    width: 1,
                                    child:
                                        const ColoredBox(color: Colors.amber),
                                  )),
                            ),
                          ],
                        ),
                      ],
                    ),
                  ),
                  Expanded(
                    flex: 1,
                    child: Container(
                        margin: EdgeInsets.all(4),
                        height: ((MediaQuery.of(context).size.height) / 4) + 12,
                        child: SizedBox(
                          height: 1,
                          width: 1,
                          child: const ColoredBox(color: Colors.amber),
                        )),
                  ),
                ],
              ),
              Align(
                alignment: Alignment.bottomRight,
                child: Container(
                    padding: EdgeInsets.only(bottom: 20),
                    margin: EdgeInsets.all(4),
                    width: (MediaQuery.of(context).size.height) / 3.8,
                    height: (MediaQuery.of(context).size.height) / 5,
                    child: SizedBox(
                      height: 1,
                      width: 1,
                      child: const ColoredBox(color: Colors.amber),
                    )),
              )
            ],
          ),
        ),
      ),

Answer 3

你可以使用这个库轻松完成你想要的。

flutter_staggered_grid_view

如果您希望布局占据整个屏幕，关键是使用 mainAxisExtent of StaggeredGridTile.extent

的屏幕高度百分比

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

void main() async {

  WidgetsFlutterBinding.ensureInitialized();

  runApp(
    MaterialApp(
      home: AppView(),
    ),
  );
}

class AppView extends StatelessWidget {
  const AppView({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    var list = List<int>.generate(100, (i) => i);

    var height = MediaQuery.of(context).size.height;

    return Scaffold(
      body: StaggeredGrid.count(
        crossAxisCount: 3,
        axisDirection: AxisDirection.down,
        mainAxisSpacing: height * 0.015,
        crossAxisSpacing: height * 0.015,
        children: [
          StaggeredGridTile.extent(
            crossAxisCellCount: 1,
            mainAxisExtent: height * 0.08,
            child: Container(
              color: Colors.amber,
            ),
          ),
          StaggeredGridTile.extent(
            crossAxisCellCount: 1,
            mainAxisExtent: height * 0.08,
            child: Container(
              color: Colors.amber,
            ),
          ),
          StaggeredGridTile.extent(
            crossAxisCellCount: 1,
            mainAxisExtent: height * 0.08,
            child: Container(
              color: Colors.amber,
            ),
          ),
          StaggeredGridTile.extent(
            crossAxisCellCount: 2,
            mainAxisExtent: height * 0.08,
            child: Container(
              color: Colors.red,
            ),
          ),
          StaggeredGridTile.extent(
            crossAxisCellCount: 1,
            mainAxisExtent: height * 0.675,
            child: Container(
              color: Colors.blue,
            ),
          ),
          StaggeredGridTile.extent(
            crossAxisCellCount: 1,
            mainAxisExtent: height * 0.81,
            // mainAxisCellCount: 1.2,
            child: Container(
              color: Colors.pink,
              child: ListView(
                children: list.map((e) => Text(e.toString())).toList(),
              ),
            ),
          ),
          StaggeredGridTile.extent(
            crossAxisCellCount: 1,
            mainAxisExtent: height * .58,
            child: Container(
              color: Colors.orange,
              child: ListView(
                children: list.map((e) => Text(e.toString())).toList(),
              ),
            ),
          ),
          StaggeredGridTile.extent(
            crossAxisCellCount: 2,
            mainAxisExtent: height * .23,
            child: Container(
              color: Colors.teal,
            ),
          ),
        ],
      ),
    );
  }
}

尝试实现此布局的问题

Problems trying to implement this layout

flutter

flutter-layout

flutter-web