是否有一个可以限制Column中的ListView.builder的有界小部件?

时间:2020-04-22 15:20:21

标签: flutter flutter-layout

我试图将ListView.builder小部件放在Column小部件中,但是Flutter团队提供的常见解决方案是将无边界ListView.builder放置在Expanded或Flexible小部件中。问题是ListView.builder现在会在列中填充尽可能多的空间(如下所示)。

有没有办法让ListView.builder只占用其所需的空间?

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatefulWidget {
  // This widget is the root of your application.
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  List<Text> lst = [Text('first'), Text('second')];

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter ListView',
      home: SafeArea(
        child: Scaffold(
          body: Column(
            children: <Widget>[
              Flexible(
                child: ListView.builder(
                  itemCount: lst.length,
                  itemBuilder: (context, index) {
                    return Center(
                      child: lst[index],
                    );
                  },
                ),
              ),
              FlatButton(
                color: Colors.blue,
                child: Text("Add Third"),
                onPressed: () {
                  setState(() {
                    lst.add(Text("Third"));
                  });
                },
              ),
              Text("Next Item"),
            ],
          ),
        ),
      ),
    );
  }
}

enter image description here

1 个答案:

答案 0 :(得分:0)

您可以使用listview的 shrinkWrap:true 属性来限制列表视图的大小。

 child: ListView.builder(
                  shrinkWrap: true, //added line
                  itemCount: lst.length,