Flutter：如何在单个TabBarView页面布局两个可独立滚动组件

我有三个Tab页面，代码如下：

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

  @override
  Widget build(BuildContext context) {
    const int tabsCount = 3;
    return DefaultTabController(
      initialIndex: 1,
      length: 3,
      child: Scaffold(
        appBar: AppBar(
          title: Text('TabBar'),
          bottom: TabBar(
            tabs: [
              Tab(
                icon: Icon(Icons.cloud_outlined),
              ),
              Tab(
                icon: Icon(Icons.beach_access_sharp),
              ),
              Tab(
                icon: Icon(Icons.brightness_5_sharp),
              ),
            ],
          ),
        ),
        body: TabBarView(
          children: [
            Center(child: Widget1()), // 这是一个可绘制的空白页面
            Center(child: Widget2()),
            Center(child: Widget3())
          ],
        ),
      ),
    );
  }
}

我希望将Widget4（一个需从页面顶部延伸到底部的CheckBoxList）放置在第一个Tab页面的右侧，尝试了以下写法但没达到预期：

body: const TabBarView(children: [
          Container(
            child: Align(
              alignment: Alignment.topRight,
              child: Widget4(),
            ),
            child: Widget1(),
          ),
          Widget2(),
          Widget3()
        ]),

预期效果说明 #

第一个Tab页面的主体是用户可创建文本框的“画布”（Widget1，占页面大部分区域），右侧是上下延伸的复选框列表组件，用户可添加待办事项并勾选，布局示意图如下：

_______
|       |
| TAB 1 |
|_______|
 _______________________________________________
|                               | This side is |
|                               | a check list |
|                               |              |
|                               |  [] item 1   |
|                               |  [] item 2   |
|                               |              |
|  This side is the "canvas"    |              |
|                               |              |
|                               |              |
|                               |              |
|                               |              |
|                               |              |
|                               |              |
|                               |              |
|_______________________________|______________|

我希望这两个组件能独立滚动，但不知道如何将Widget1和Widget4组合成一个整体添加到TabBarView的body中，类似这样的结构：

body: const TabBarView(children: [
          (Widget1 + Widget4),
          Widget2(),
          Widget3()
        ]),

目前我还没创建画布Widget1，复选框组件是直接从Flutter文档复制的，代码如下：

/////////////////////////////////////////////////////////////////
// CheckBoxList
/////////////////////////////////////////////////////////////////

class LabeledCheckbox extends StatelessWidget {
  const LabeledCheckbox({
    super.key,
    required this.label,
    required this.padding,
    required this.value,
    required this.onChanged,
  });

  final String label;
  final EdgeInsets padding;
  final bool value;
  final ValueChanged<bool> onChanged;

  @override
  Widget build(BuildContext context) {
    return InkWell(
      onTap: () {
        onChanged(!value);
      },
      child: Padding(
        padding: padding,
        child: Row(
          children: <Widget>[
            Expanded(child: Text(label)),
            Checkbox(
              value: value,
              onChanged: (bool? newValue) {
                onChanged(newValue!);
              },
            ),
          ],
        ),
      ),
    );
  }
}

class CheckBoxWidget extends StatefulWidget {
  const CheckBoxWidget({super.key});

  @override
  State<CheckBoxWidget> createState() => _CheckBoxWidgetState();
}

class _CheckBoxWidgetState extends State<CheckBoxWidget> {
  bool _isSelected = false;

  @override
  Widget build(BuildContext context) {
    return LabeledCheckbox(
      label: 'This is the label text',
      padding: const EdgeInsets.symmetric(horizontal: 20.0),
      value: _isSelected,
      onChanged: (bool newValue) {
        setState(() {
          _isSelected = newValue;
        });
      },
    );
  }
}

请问我应该使用Row拆分两个组件？还是使用两个独立的SizedBox、Stack或Container？

内容的提问来源于stack exchange，提问作者chuckd833