我正在尝试创建以下示意图所示的屏幕。我正在使用自定义滚动视图,但在自定义滚动视图中,我无法获取横向列表视图。我尝试在自定义滚动视图中使用列表视图,但完整视图未显示。但如果我将其垂直排列,则可以看到视图,就像下面的两个图像一样。
请看Home类。
请找到适配器视图。
![使用自定义滚动视图](https://istack.dev59.com/PvY3e.webp)
![输入图像说明](https://istack.dev59.com/FhsXu.webp)
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'),
],
),
)
],
),
);
}
}