自定义滚动中的水平列表视图 google flutter

Question

我正在尝试创建如下图所示的屏幕我正在使用自定义滚动视图但在自定义滚动中我无法获得水平列表视图我尝试在自定义滚动视图完整视图中使用列表视图未显示，但如果我将其垂直放置，则可以看到如下图 2 所示的视图

请回家class

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'),
              ],
            ),
          )
        ],
      ),
    );
  }
}

Answer 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。

自定义滚动中的水平列表视图 google flutter

horizontal list view in the custom scroll google flutter

dart

flutter

flutter-layout

flutter-sliver