如何使用颤振将网页分成 3 个可滚动部分？

Question

我有一张显示三个灰色滚动条的图像的屏幕截图。你如何使用颤振重新创建它。

Answer 1

这是你要找的吗？

如果是，您可以使用包含ListViews、GridViews、SingleChildScrollViews 或其他可滚动小部件的Row 来实现。

您会看到我将ListViews 和GridView 嵌入到ScrollBar 小部件中。我还将ScrollController 关联到Scrollbars 和关联的ListView 或GridView，并将ScrollBar 定义为isAlwaysShown: true。

完整的源代码，方便复制粘贴

import 'dart:math' show Random;

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

void main() {
  runApp(
    MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Demo',
      home: HomePage(),
    ),
  );
}

class HomePage extends HookWidget {
  @override
  Widget build(BuildContext context) {
    final random = Random();
    final _leftScrollController = useScrollController();
    final _middleScrollController = useScrollController();
    final _rightScrollController = useScrollController();
    return Scaffold(
      body: Row(
        children: [
          Expanded(
            child: Scrollbar(
              controller: _leftScrollController,
              isAlwaysShown: true,
              child: ListView(
                controller: _leftScrollController,
                shrinkWrap: true,
                children: List.generate(
                  20,
                  (index) => ListTile(
                    title: Text('Left $index'),
                  ),
                ),
              ),
            ),
          ),
          Expanded(
            flex: 4,
            child: Scrollbar(
              controller: _middleScrollController,
              isAlwaysShown: true,
              child: GridView.count(
                controller: _middleScrollController,
                shrinkWrap: true,
                crossAxisCount: 4,
                mainAxisSpacing: 8.0,
                crossAxisSpacing: 8.0,
                children: List.generate(
                  20,
                  (index) => AspectRatio(
                    aspectRatio: 2 / 3,
                    child: ColoredBox(
                      color: Color(0xff555555 + random.nextInt(0x777777)),
                    ),
                  ),
                ),
              ),
            ),
          ),
          Expanded(
            child: Scrollbar(
              controller: _rightScrollController,
              isAlwaysShown: true,
              child: ListView(
                controller: _rightScrollController,
                shrinkWrap: true,
                children: List.generate(
                  30,
                  (index) => ListTile(
                    title: Text('Right $index'),
                  ),
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }
}