不知道我做错了什么。我不知道如何在我的第一个标签页上对齐小部件。
我有三个标签:
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 boxes
,stacked
,container
??
2条答案
按热度按时间j8ag8udp1#
使用
Row
作为选项卡1页面:输出应类似于:
下面是工作代码:
mzmfm0qo2#
我不确定我是否理解了你想要的结果。但如果我理解了,那么你可以看看这是否符合你的要求: