如何像在Disney+应用程序中那样在垂直模式下转换我的水平列表视图

Question

:SliverToBoxAdapter(
child: SizedBox(
child: Column(
children: [
// ignore: prefer_const_constructors
Padding(
padding: const EdgeInsets.only(right: 210.0),
// ignore: prefer_const_constructors
child: Text(
"Great Personality",
// ignore: prefer_const_constructors
style: TextStyle(
color: Colors.white,
fontWeight: FontWeight.bold,
fontSize: 20.0,
),
),
),
Column(
children: [
Padding(
padding: const EdgeInsets.all(8.0),
child: SizedBox(
height: 200,
child: ListView(
scrollDirection: Axis.horizontal,
children: [
Padding(
padding: const EdgeInsets.all(8.0),
child: InkWell(
child: Container(
width: 120,
color: Colors.amber,
),
),
),
Padding(
padding: const EdgeInsets.all(8.0),
child: Container(
width: 120,
color: Colors.white,
),
),
Padding(
padding: const EdgeInsets.all(8.0),
child: Container(
width: 120,
color: Colors.white,
),
),
Padding(
padding: const EdgeInsets.all(8.0),
child: Container(
width: 120,
color: Colors.white,
),
),
Padding(
padding: const EdgeInsets.all(8.0),
child: Container(
width: 120,
color: Colors.white,
),
),
Padding(
padding: const EdgeInsets.all(8.0),
child: Container(
width: 120,
color: Colors.white,
),
),
],
),
),
)
],
)
],
),
),
),

每当我点击箭头按钮时，我希望我的UI以垂直样式转换，就像在迪士尼应用程序主页中一样由此：在此处输入图像描述对此：在此处输入图像描述

我应该使用哪个小工具，这样每当有人点击右箭头按钮时，它就会导航到另一个页面，水平列表视图中的任何容器都会转换为垂直模式？

Answer 1

您可能需要在列表视图中使用列表视图

下面是一个示例代码：

Widget build(BuildContext context) {
Widget horizontalList1 = new Container(
margin: EdgeInsets.symmetric(vertical: 20.0),
height: 200.0,
child: new ListView(
scrollDirection: Axis.horizontal,
children: <Widget>[
Container(width: 160.0, color: Colors.red,),
Container(width: 160.0, color: Colors.orange,),
Container(width: 160.0, color: Colors.pink,),
Container(width: 160.0, color: Colors.yellow,),
],
)
);
Widget horizontalList2 = new Container(
margin: EdgeInsets.symmetric(vertical: 20.0),
height: 200.0,
child: new ListView(
scrollDirection: Axis.horizontal,
children: <Widget>[
Container(width: 160.0, color: Colors.blue,),
Container(width: 160.0, color: Colors.green,),
Container(width: 160.0, color: Colors.cyan,),
Container(width: 160.0, color: Colors.black,),
],
)
);
return new Scaffold(
appBar: new AppBar(
title: new Text(widget.title),
),
body: new Center(
child: new Container(
child: ListView(
scrollDirection: Axis.vertical,
children: <Widget>[
horizontalList1,
horizontalList2,
],
),
),
), // This trailing comma makes auto-formatting nicer for build methods.
);

结果如下：

水平列表视图内部列表视图