Question

我正在尝试创建如下图所示的屏幕，我正在使用自定义滚动视图，但是在自定义滚动中，我无法获取水平列表视图，而在自定义滚动视图中使用列表视图尝试了完整视图显示，但如果我垂直放置，则该视图可以像下面的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'),
              ],
            ),
          )
        ],
      ),
    );
  }
}

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中的水平列表视图

1 个答案: