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

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

这就是您要寻找的吗

如果是，您可以通过包含

列表视图

、

网格视图

、

SingleChildScrollView

或其他可滚动小部件的

行

来实现

您将看到我在

滚动条

小部件中嵌入了

列表视图

和

网格视图

。我还将

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