创建可以水平和垂直滚动的容器块

Question

我正在设计应用程序，我必须在其中创建一些代表建筑物平面的块。 其中我有 2 个数字

• 楼层数
• 每层的公寓数量

所以我尝试了两种方法

1. 使用 gridview 并将 itemCount 作为楼层数 crossAxisCount 作为 - 每层楼的公寓数
2. 使用 2 个列表视图。楼层的第一个列表视图 - 在其构建器内垂直滚动 第二个列表视图用于水平滚动的平面。

但是我想让它在水平和垂直方向上都可以滚动，所以我不知道该怎么做，谁能帮助我！ look this,created using listview

Answer 1

您可以通过将水平ListViews 嵌套在垂直ListView 中来实现此目的：

ListView.builder(
  shrinkWrap: true,
  itemCount: 10,
  itemExtent: 50,
  itemBuilder: (context, verticalIndex) => ListView.builder(
    shrinkWrap: true,
    scrollDirection: Axis.horizontal,
    itemCount: 15,
    itemExtent: 50,
    itemBuilder: (context, appartmentIndex) => Container(),
  ),
);

---

完整演示

import 'dart:math';

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

const List<Color> kColors = [
  Color(0x66a7414a),
  Color(0x66282726),
  Color(0x666a8a82),
  Color(0x66a37c27),
  Color(0x66563838),
];
const double kOpacity = .6;
const double kAppartmentSize = 64.0;
const TextStyle kFloorTextStyle = TextStyle(
  fontSize: 8.0,
  fontWeight: FontWeight.normal,
);
const TextStyle kApartmentTextStyle = TextStyle(
  fontSize: 12.0,
  fontWeight: FontWeight.bold,
);
const int kMinNbFloors = 10;
const int kMaxNbFloors = 18;
const int kMinNbApartments = 3;
const int kMaxNbApartments = 10;

void main() {
  runApp(
    MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Real Estate Demo',
      theme: ThemeData.dark(),
      home: Scaffold(
        appBar: AppBar(title: Text('Real Estate Demo')),
        body: MyWidget(),
      ),
    ),
  );
}

class MyWidget extends HookWidget {
  final Random random = new Random();

  @override
  Widget build(BuildContext context) {
    final nbFloors = useState(
        kMinNbFloors + random.nextInt(kMaxNbFloors - kMinNbFloors + 1));
    final nbAppartments = useState(
      List.generate(
        nbFloors.value,
        (index) =>
            kMinNbApartments +
            random.nextInt(kMaxNbApartments - kMinNbApartments + 1),
      ),
    );
    return ListView.builder(
      shrinkWrap: true,
      itemCount: nbFloors.value,
      itemExtent: kAppartmentSize,
      reverse: true,
      itemBuilder: (context, floorIndex) => ListView.builder(
        shrinkWrap: true,
        scrollDirection: Axis.horizontal,
        itemCount: nbAppartments.value[floorIndex],
        itemExtent: kAppartmentSize,
        itemBuilder: (context, appartmentIndex) => Container(
          padding: EdgeInsets.all(8.0),
          decoration: BoxDecoration(
            color:
                kColors[random.nextInt(kColors.length)].withOpacity(kOpacity),
            border: Border.all(
              width: .5, // red as border color
            ),
            image: DecorationImage(
              image: AssetImage("images/window.png"),
              fit: BoxFit.contain,
              alignment: Alignment.center,
            ),
          ),
          child: Center(
            child: Row(
              mainAxisAlignment: MainAxisAlignment.center,
              crossAxisAlignment: CrossAxisAlignment.end,
              children: [
                Text(appartmentIndex.toString(), style: kApartmentTextStyle),
                const SizedBox(width: 4.0),
                Text(floorIndex.toString(), style: kFloorTextStyle),
              ],
            ),
          ),
        ),
      ),
    );
  }
}