flutter 如何将listview与其他小工具一起使用?

falq053o  于 2023-02-05  发布在  Flutter
关注(0)|答案(7)|浏览(195)

我想将列表视图与其他小部件一起使用,但是我不能。当我将容器用于列表视图时,我不能查看任何其他小部件。我该怎么做呢?

Scaffold(   
        body: SingleChildScrollView(
          child: Column(
            children: <Widget>[

              ListView.builder(),

              RaisedButton(
                child: Text('Text'),
                onPressed:(){})
])));
7rfyedvj

7rfyedvj1#

如果你试图显示一些基于列表的小部件,你根本不应该嵌套滚动视图,dart允许你在任何集合中使用,你也可以使用List.generate,或者list.map和spread操作符

Scaffold(
  body: SingleChildScrollView(
    child: Column(
      children: <Widget>[
        for(final item in list) widget,
        RaisedButton(child: Text('Text'), onPressed: () {})
      ],
    ),
  ),
);

Scaffold(
  body: SingleChildScrollView(
    child: Column(
      children: <Widget>[
        ...list.map((item)=> widget).toList(),
        RaisedButton(child: Text('Text'), onPressed: () {})
      ],
    ),
  ),
);

Scaffold(
  body: SingleChildScrollView(
    child: Column(
      children: <Widget>[
        ...List.generate(list.length, (index)=> widget).toList(),
        RaisedButton(child: Text('Text'), onPressed: () {})
      ],
    ),
  ),
);
pdkcd3nj

pdkcd3nj2#

这是因为您使用的是列中的ListView,ListView和列都是全屏显示的,因为这样我们只能在屏幕上看到ListView,要解决这个问题,我们必须将ListView缩小到它的确切大小,因为它使用了shrinkwrap: true

ListView.Builder(
  shrinkWrap: true,
  physics: NeverScrollableScrollPhysics(),

)

physics: NeverScrollableScrollPhysics(),此处用于停止ListView滚动,您已添加滚动整个页面的SingleChildScrollView()

wlp8pajw

wlp8pajw3#

向列表视图添加包络面提取

Scaffold(   
    body: SingleChildScrollView(
      child: Column(
        children: <Widget>[

           ListView(
        shrinkWrap: true,
        children:[
          Container(),
          Container(),
          ]
        ),

          RaisedButton(
            child: Text('Text'),
            onPressed:(){})
])));

对于更高级的滚动挑战,如列中有多个ListView,我建议您添加一个ScrollPhysics

e7arh2l6

e7arh2l64#

此处需要使用Expanded并将数据设置为ListView.builder

final items = List<String>.generate(10000, (i) => 'Item $i');

Column(children: [
    Expanded(
      child: ListView.builder(
              itemCount: items.length,
              itemBuilder: (context, index) {
                return ListTile(
                  title: Text(items[index]),
                );
              },
            ),
    AnyWidget(...)
])
huwehgph

huwehgph5#

您必须使用Expanded Package ListView小部件,或者如果要使用Container Package 它,则必须指定Container的高度或宽度

6ioyuze2

6ioyuze26#

尝试此代码...

Scaffold(
   body: SingleChildScrollView(
     child: Column(
       children: [
         ListView.builder(
           physics: NeverScrollableScrollPhysics(),
           itemCount: 4,
           shrinkWrap: true,
           itemBuilder: (context, index) {
             return Text('Hello');
           }
         ),
         RaisedButton(
           child: Text('Text'),
           onPressed: () {}
         )
       ]
     )
   )
 );
cetgtptt

cetgtptt7#

在本例中,ListView和另一个widget(一个黄色的Container)都是Column widget的孩子,这样可以保证ListView和其他widget都可以显示在屏幕上。

Column(
  children: <Widget>[
    Container(
      height: 200,
      child: ListView(
        scrollDirection: Axis.horizontal,
        children: <Widget>[
          Container(
            width: 160.0,
            color: Colors.red,
          ),
          Container(
            width: 160.0,
            color: Colors.blue,
          ),
          Container(
            width: 160.0,
            color: Colors.green,
          ),
        ],
      ),
    ),
    Container(
      height: 200,
      color: Colors.yellow,
    ),
  ],
)

相关问题