自定义滚动谷歌颤动中的水平列表视图
Posted
技术标签:
【中文标题】自定义滚动谷歌颤动中的水平列表视图【英文标题】：horizontal list view in the custom scroll google flutter 【发布时间】：2019-01-21 05:02:04 【问题描述】：我正在尝试像下面的草图一样创建屏幕，我正在使用自定义滚动视图，但在自定义滚动中我无法获得水平列表视图，我尝试在自定义滚动视图中使用列表视图完整视图不是显示，但如果我是垂直制作的，那么视图可以像下面的 2 图像 一样可见
请回家上课
class Home extends StatefulWidget
@override
State<StatefulWidget> createState()
HomeState homeState() => new HomeState();
return homeState();
class HomeState extends State<Home>
@override
Widget build(BuildContext context)
return new MaterialApp(
home: new Scaffold(
appBar: new AppBar(
title: new Text('Home Screen'),
backgroundColor: primarycolor,
),
drawer: Drawer(
child: new ListView(
children: <Widget>[
new UserAccountsDrawerHeader(
accountName: new Text('Biz Standards'),
accountEmail: new Text('bizstandards@gmail.com'),
currentAccountPicture: new Container(
width: 100.0,
height: 100.0,
decoration: new BoxDecoration(
shape: BoxShape.circle,
image: new DecorationImage(
fit: BoxFit.fill,
image: new NetworkImage(
'https://cnet2.cbsistatic.com/img/3JQUEv_h8xcJ8QEcVNteWVADsew=/936x527/2017/08/21/ae78abff-be85-45e7-bae1-242ca5609f2c/androidoreolockup.jpg')))),
decoration: new BoxDecoration(color: primarycolor),
),
new ListTile(
title: new Text('Profile'),
trailing: new Icon(Icons.account_circle),
),
new ListTile(
title: new Text('Your Posts'),
trailing: new Icon(Icons.bookmark_border),
),
new ListTile(
title: new Text('Change Password'),
trailing: new Icon(Icons.track_changes),
),
new ListTile(
title: new Text('Contact Us'),
trailing: new Icon(Icons.contact_mail),
),
new ListTile(
title: new Text('Help'),
trailing: new Icon(Icons.help_outline),
),
new ListTile(
trailing: new Icon(Icons.subdirectory_arrow_left),
title: new Text('Logout'),
)
],
),
),
floatingActionButton: new FloatingActionButton(
onPressed: null,
backgroundColor: primarycolor,
child: Icon(Icons.add),
),
body: new CustomScrollView(
slivers: <Widget>[
new SliverList(
delegate: new SliverChildListDelegate(<Widget>[
new BannerView(
data: [
'B',
'I',
'Z',
'S',
'T',
'A',
'N',
'D',
'A',
'R',
'D',
'S'
],
buildShowView: (index, data)
return Container(
color: secondarycolor,
child: new Center(
child: new Text(
data,
style: new TextStyle(
color: Colors.white, fontSize: 30.0),
),
),
);
,
onBannerClickListener: (index, data)
print(index);
,
),
]),
),
new SliverList(
delegate: new SliverChildListDelegate(<Widget>[
new Column(
children: <Widget>[
new Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Container(
child: new Text(
'Top Stories',
style: new TextStyle(fontSize: 16.0),
),
margin: EdgeInsets.all(10.0),
),
Container(
child: new Text(
'See All',
style: new TextStyle(fontSize: 16.0),
),
margin: EdgeInsets.all(10.0),
)
],
),
new Container(
margin:
EdgeInsets.only(right: 5.0, left: 5.0, bottom: 10.0),
child: new Divider(
color: secondarycolor,
height: 4.0,
),
)
],
)
]),
),
new SliverList(
delegate: new SliverChildBuilderDelegate(
(BuildContext context, int index)
return GestureDetector(
onTap: ()
Navigator.push(
context,
new MaterialPageRoute(
builder: (context) => new StoryDetails()));
,
child: HomeAdapter(index),
);
,
childCount: 20,
),
),
new SliverList(
delegate: new SliverChildListDelegate(<Widget>[
new Column(
children: <Widget>[
new Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Container(
child: new Text(
'Latest Stories',
style: new TextStyle(fontSize: 16.0),
),
margin: EdgeInsets.all(10.0),
),
Container(
child: new Text(
'See All',
style: new TextStyle(fontSize: 16.0),
),
margin: EdgeInsets.all(10.0),
)
],
),
new Container(
margin:
EdgeInsets.only(right: 5.0, left: 5.0, bottom: 10.0),
child: new Divider(
color: secondarycolor,
height: 4.0,
),
)
],
)
]),
),
new SliverList(
delegate: new SliverChildBuilderDelegate(
(BuildContext context, int index)
return HomeAdapter(index);
,
childCount: 20,
),
),
],
),
),
);
请找到适配器视图
class HomeAdapter extends StatelessWidget
final int id;
HomeAdapter(this.id);
@override
Widget build(BuildContext context)
// TODO: implement build
return new Card(
elevation: 4.0,
margin: EdgeInsets.all(10.0),
child: new Column(
children: <Widget>[
Container(
margin: EdgeInsets.only(left: 5.0,top: 10.0),
child: new Text(
'Catergory $id',
style: TextStyle(fontSize: 18.0),
),
alignment: Alignment(-1.0, 0.0),
),
new Image.asset(
'assets/images/logo.png',
width: double.infinity,
height: 200.0,
),
Container(
margin: EdgeInsets.only(left: 5.0),
child: new Text(
'Story Title $id',
style: TextStyle(fontSize: 18.0, fontWeight: FontWeight.bold),
),
alignment: Alignment(-1.0, 0.0),
),
Container(
margin:
EdgeInsets.only(left: 5.0, right: 5.0, top: 5.0, bottom: 10.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Text('Posted By $id'),
Text('Posted Date $id'),
],
),
)
],
),
);
【问题讨论】：
你试过在 ListView 上使用 scrollDirection 吗？ 是的，我已经试过了 你想要这样的东西：pasteboard.co/HzHD1pm.png 吗？如果是，告诉我把代码放在这里。 是的，这就是我想要的，请把代码放在这里 我还需要标题和分隔符@Yamin 你能把代码粘贴到这里吗 【参考方案1】：您可以使用具有不同滚动方向的 ListView，而不是使用自定义滚动视图。 这是其中一个部分的示例。你可以得到这个想法：
return new MaterialApp(
home: new Scaffold(
appBar: new AppBar(
title: new Text('Home Screen'),
backgroundColor: primarycolor,
),
drawer: Drawer(
child: new ListView(
children: <Widget>[
new UserAccountsDrawerHeader(
accountName: new Text('Biz Standards'),
accountEmail: new Text('bizstandards@gmail.com'),
currentAccountPicture: new Container(
width: 100.0,
height: 100.0,
decoration: new BoxDecoration(
shape: BoxShape.circle,
image: new DecorationImage(
fit: BoxFit.fill,
image: new NetworkImage(
'https://cnet2.cbsistatic.com/img/3JQUEv_h8xcJ8QEcVNteWVADsew=/936x527/2017/08/21/ae78abff-be85-45e7-bae1-242ca5609f2c/androidoreolockup.jpg')))),
decoration: new BoxDecoration(color: primarycolor),
),
new ListTile(
title: new Text('Profile'),
trailing: new Icon(Icons.account_circle),
),
new ListTile(
title: new Text('Your Posts'),
trailing: new Icon(Icons.bookmark_border),
),
new ListTile(
title: new Text('Change Password'),
trailing: new Icon(Icons.track_changes),
),
new ListTile(
title: new Text('Contact Us'),
trailing: new Icon(Icons.contact_mail),
),
new ListTile(
title: new Text('Help'),
trailing: new Icon(Icons.help_outline),
),
new ListTile(
trailing: new Icon(Icons.subdirectory_arrow_left),
title: new Text('Logout'),
)
],
),
),
floatingActionButton: new FloatingActionButton(
onPressed: null,
backgroundColor: primarycolor,
child: Icon(Icons.add),
),
body: new ListView(
children: <Widget>[
new ListView(
shrinkWrap: true,
children: <Widget>[
new Column(
children: <Widget>[
new Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Container(
child: new Text(
'Latest Stories',
style: new TextStyle(fontSize: 16.0),
),
margin: EdgeInsets.all(10.0),
),
Container(
child: new Text(
'See All',
style: new TextStyle(fontSize: 16.0),
),
margin: EdgeInsets.all(10.0),
)
],
),
new Container(
margin:
EdgeInsets.only(right: 5.0, left: 5.0, bottom: 10.0),
child: new Divider(
color: secondarycolor,
height: 4.0,
),
)
],
)
],
),
SizedBox(
// a List view with horizontal direction cannot have unbounded height.
height: 300.0,
child: new ListView(
shrinkWrap: true,
scrollDirection: Axis.horizontal,
children: List.generate<Widget>(
20, (int index) => HomeAdapter(index)),
),
),
],
),
),
);
另外，请检查This example。
【讨论】：
给出静态高度可能会影响不同的屏幕对吧？ 它会影响，但不会以错误的方式。更大的屏幕将有更多的数据（小部件）。如果您想为更大的屏幕扩展高度，请使用 AspectRatio 小部件或其他类似的小部件。 （检查此***.com/a/50596132/3123267）。此外，您可以从屏幕高度计算您想要的高度。（检查此***.com/q/43122113/3123267） scrollDirection: Axis.horizontal 完整视图消失了 我不明白。景色没了？你改变了什么？ 如果我删除滚动方向，我已经复制了相同的内容，然后我可以看到视图以上是关于自定义滚动谷歌颤动中的水平列表视图的主要内容，如果未能解决你的问题，请参考以下文章