我刚起步,我正在尝试学习如何创建视图。我试图为视图创建一个单独的文件,或者如果它在flutter中被称为窗口小部件,则仅从main.dart调用它。
我有一个单独的包含此代码的小部件
class PageEntryWidgetMain extends StatefulWidget {
final PageViewEntryMain pageViewEntryMain;
const PageEntryWidgetMain({Key key, this.pageViewEntryMain})
: super(key: key);
@override
State<StatefulWidget> createState() {
return _PageEntryWidgetMainState();
}
}
class _PageEntryWidgetMainState extends State<PageEntryWidgetMain> {
@override
Widget build(BuildContext context) {
return Container(
child: Row(
children: <Widget>[
Text(widget.pageViewEntryMain.title)
],
),
);
}
}
并且我正在尝试通过使用具有以下代码的视图分页器来显示它
return Scaffold(
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
PageView.builder(
itemBuilder: (context, position) {
PageEntryWidgetMain(
pageViewEntryMain: pages[position],
);
},
itemCount: pages.length,
scrollDirection: Axis.horizontal,
)
],
),
),
);
但是它给了我以下错误
我对它真正抱怨的有些困惑。通过使用此代码替换PageView.builder,我只能显示一个视图
PageEntryWidgetMain(pageViewEntryMain: pages[0])
因此,我认为单独的窗口小部件本身没有问题。可能与我试图使用给我带来错误的ViewPager有关。
我一直在搜索PageView的实现,但是我还没有看到实际上有一个单独的视图可以调用显示的视图。我需要以这种方式学习它,这样我才能分离视图,而不仅仅是将它们全部写入一个文件中。
答案 0 :(得分:0)
PageView
不能是Column
的直接子级。更改列以在两者之间添加Expanded
,如下所示:
Column(
children: <Widget>[
Expanded(
child: PageView.builder(),
),
]
)
为解释这里发生的情况,Column
具有无限的水平宽度,即它将继续水平扩展以占用孩子所需的空间。 PageView
(以及任何其他水平滚动小部件)需要水平约束才能使滚动逻辑正常工作。
Expanded
通过占用尽可能多的空间来限制PageView
的水平尺寸,这应该可以解决问题。
答案 1 :(得分:0)
您可以使用具有固定高度和宽度的任何Widget 包装PageView 。
例如,我使用Container()
:
Column(
children: <Widget>[
Container(
width: double.infinity,
height: 100.0,
child: PageView.builder(),
),
]
)