在Flutter中使用ListView显示分段控件

时间:2019-05-17 18:26:30

标签: flutter

我有以下代码,仅显示Flutter中的顶部appBar。如果删除ListView,则可以看到分段控件,但是如果保留ListView,则看不到任何内容,如下所示:

enter image description here

这是我的代码:

Widget build(BuildContext build) {

    return Scaffold(
      appBar: AppBar(
        title: Text('Movies')
      ),
      body: Center(
          child: Column(children: <Widget>[
            SizedBox(
              width: 400,
              child: 
                Padding(  
                  padding: EdgeInsets.all(20.0),
                  child: CupertinoSegmentedControl(
                  children: genreWidgets,
                  onValueChanged: (int val) { },
                )
            ))
          , ListView(children: <Widget>[
            ListTile(
              title: Text('First Item'),
              leading: Icon(Icons.map)
            ), 
            ListTile(
              title: Text('Second Item'), 
              leading: Icon(Icons.message)
            )
          ],)
          ])
        ) 
    );

  }

1 个答案:

答案 0 :(得分:1)

ListView中不能有Column。相反,您应该尝试CustomScrollView并列出条子。

Scaffold(
  appBar: AppBar(title: Text('Movies')),
  body: CustomScrollView(
    slivers: [
      SliverList(
        delegate: SliverChildListDelegate([
          SizedBox(
            width: 400,
            child: Padding(
              padding: EdgeInsets.all(20.0),
              child: CupertinoSegmentedControl(
                children: genreWidgets,
                onValueChanged: (int val) {},
              ),
            ),
          ),
        ]),
      ),
      SliverList(
        delegate: SliverChildListDelegate([
          ListTile(
            title: Text('First Item'),
            leading: Icon(Icons.map),
          ),
          ListTile(
            title: Text('Second Item'),
            leading: Icon(Icons.message),
          )
        ]),
      ),
    ],
  ),
);