Flutter:在单个选项卡栏视图页面上对齐两个小部件

rhfm7lfc  于 2023-04-07  发布在  Flutter
关注(0)|答案(2)|浏览(112)

不知道我做错了什么。我不知道如何在我的第一个标签页上对齐小部件。
我有三个标签:

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()), //this is a full blank page to draw on
            Center(child: Widget2()),
            Center(child: Widget3())
            ),
          ],
        ),
      ),
    );
  }
}

但是我有Widget4() //a CheckBoxList() I want to expand from top to bottom of the page,我想在第一个选项卡页面的右侧向下对齐。
我尝试了下面的各种版本:

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

编辑:
编辑:
我正在尝试创建这个(请原谅基本的绘图)。Tab 1页面的主体有一个“画布功能”,用户可以在其中创建文本框。这是Widget 1,是页面/屏幕的大部分。
然后在页面的右手边,从页面的底部延伸到顶部是一个“复选框列表小部件”,允许用户添加“要做的事情”,然后勾选它们。像这样:

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

我希望他们两个都能独立滚动。
我不知道如何将Widget 1和Widget 4组合在一起,所以当我将它们添加到TabBarView的主体部分时,它们被视为“一个”页面,如下所示:

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

我还没有创建画布Widget 1。CheckBoxListWidget是从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并拆分两个小部件?我是否使用两个单独的sized boxesstackedcontainer??

j8ag8udp

j8ag8udp1#

使用Row作为选项卡1页面:

Row(
  children: [
    // your canvas widget here
    Container(
      color: Colors.yellow,
      width: 250,
    ),
    Expanded(
      // your checkbox list here
      child: Container(
        color: Colors.pink,
      ),
    ),
  ],
),

输出应类似于:

下面是工作代码:

import 'package:flutter/material.dart';

main() => runApp(const DemoApp());

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: DefaultTabController(
        initialIndex: 1,
        length: 3,
        child: Scaffold(
          appBar: AppBar(
            title: const Text('TabBar'),
            bottom: const 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: [
              Row(
                children: [
                  Container(
                    color: Colors.yellow,
                    width: 250,
                  ),
                  Expanded(
                    child: Container(
                      color: Colors.pink,
                    ),
                  ),
                ],
              ),
              //this is a full blank page to draw on
              Center(
                  child: Container(
                color: Colors.black,
              )),
              Center(
                  child: Container(
                color: Colors.blue,
              )),
            ],
          ),
        ),
      ),
    );
  }
}
mzmfm0qo

mzmfm0qo2#

我不确定我是否理解了你想要的结果。但如果我理解了,那么你可以看看这是否符合你的要求:

TabBarView(
  children: [
    SizedBox(
      width: double.infinity,
      child: Align(
        alignment: Alignment.topRight,
        child: Widget4(),
      ),
    ),
    Widget2(),
    Widget3(),
  ]
),

相关问题