如何在同一屏幕上用颤振显示两个ListView？

我试图在一个屏幕上显示两个listView，但第二个listView只显示了一半屏幕，底部有很多空间

import 'package:flutter/material.dart';

final Color darkBlue = Color.fromARGB(255, 18, 32, 47);

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.dark().copyWith(scaffoldBackgroundColor: darkBlue),
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Center(
          child: MyWidget(),
        ),
      ),
    );
  }
}

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        Flexible(
          child: Container(
            color: Colors.red,
            child: _showFirstListView(),
          ),
        ),
        Expanded(
          child: Container(
            color: Colors.blue,
            child: _showSecondListView(),
          ),
        )
      ],
    );
  }

  Widget _showFirstListView() {
    return ListView.builder(
      itemCount: 1,
      shrinkWrap: true,
      itemBuilder: (context, index) {
        return Text("First ListView");
      },
    );
  }

  Widget _showSecondListView() {
    return ListView.builder(
        itemCount: 15,
        itemBuilder: (BuildContext context, int index) {
          return Container(
            child: Column(
              children: <Widget>[
                SizedBox(
                  height: 15,
                ),
                Text("FirstLine"),
                SizedBox(
                  height: 15,
                ),
                Text("SecondLine"),
                SizedBox(
                  height: 15,
                ),
                Text("ThirdLine"),
              ],
            ),
          );
        });
  }
}

我已经把它贴在达特帕德上了。

---

只需将flex属性添加到expanded中，就可以了

Expanded(
  flex: 10,
  child: Container(
    color: Colors.blue,
    child: _showSecondListView(),
  ),
)

或者，如果您想要两个大小相等的列表，只需使用Expanded将两者包装起来，并在两者中提供相同的flex，您可以使用flex value更改显示列表所需的比例

    return Column(
      children: <Widget>[
        Expanded(
          flex: 1,
          child: Container(
            color: Colors.red,
            child: _showFirstListView(),
          ),
        ),
        Expanded(
          flex: 1,
          child: Container(
            color: Colors.blue,
            child: _showSecondListView(),
          ),
        )
      ],
    );

---

只需将flex属性添加到expanded，它就可以正常工作

Expanded(
  flex: 10,
  child: Container(
    color: Colors.blue,
    child: _showSecondListView(),
  ),
)

或者，如果您想要两个大小相等的列表，只需使用Expanded将两者包装起来，并在两者中提供相同的flex，您可以使用flex value更改显示列表所需的比例

    return Column(
      children: <Widget>[
        Expanded(
          flex: 1,
          child: Container(
            color: Colors.red,
            child: _showFirstListView(),
          ),
        ),
        Expanded(
          flex: 1,
          child: Container(
            color: Colors.blue,
            child: _showSecondListView(),
          ),
        )
      ],
    );

---

您想从弹性列表中删除第一个ListView，因为您已经将其收缩为包裹，并且在同一列表中同时使用“收缩包裹”和“弹性”，这将导致两个列表共享相同的50/50空间，但实际上您正在收缩第一个列表，剩余空间将为空

为了避免这种情况，只需让列表本身决定使用什么空间即可

 @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        Container(
          color: Colors.red,
          child: _showFirstListView(),
        ),
        Expanded(
          child: Container(
            color: Colors.blue,
            child: _showSecondListView(),
          ),
        )
      ],
    );
  }

---

您想从弹性列表中删除第一个ListView，因为您已经将其收缩为包裹，并且在同一列表中同时使用“收缩包裹”和“弹性”，这将导致两个列表共享相同的50/50空间，但实际上您正在收缩第一个列表，剩余空间将为空

为了避免这种情况，只需让列表本身决定使用什么空间即可

 @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        Container(
          color: Colors.red,
          child: _showFirstListView(),
        ),
        Expanded(
          child: Container(
            color: Colors.blue,
            child: _showSecondListView(),
          ),
        )
      ],
    );
  }

---

我知道这已经得到了回答，但对于您试图实现的目标，我不知道您为什么要使用两个单独滚动的列表视图，为什么不使用单个列表视图。试试这个，可能比你想要的要好

import 'package:flutter/material.dart';

final Color darkBlue = Color.fromARGB(255, 18, 32, 47);

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.dark().copyWith(scaffoldBackgroundColor: darkBlue),
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: SingleChildScrollView(
          child: MyWidget(),
        ),
      ),
    );
  }
}

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
          Container(
             width: double.infinity,
            color: Colors.red,
            child: _showFirstListView(),
          ),
          Container(
            width: double.infinity,
            color: Colors.blue,
            child: _showSecondListView(),
          ),
      ],
    );
  }

  Widget _showFirstListView() {
    return Column(
    children: [
      ...[1].map((item) => Text("first listview")), //just in case you want to build from list of items as you would do in ListView.builder
    ],
    );
  }

  Widget _showSecondListView() {
    return Column(
    children: [
      //usually you already have a list of items you want to display
      ...[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15].map((item) => Container(
            child: Column(
              children: <Widget>[
                SizedBox(
                  height: 15,
                ),
                Text("FirstLine"),
                SizedBox(
                  height: 15,
                ),
                Text("SecondLine"),
                SizedBox(
                  height: 15,
                ),
                Text("ThirdLine"),
              ],
            ),
          )), //just in case you want to build from list of items as you would do in ListView.builder
    ],
    );
  }
}

---

我知道这已经得到了回答，但对于您试图实现的目标，我不知道您为什么要使用两个单独滚动的列表视图，为什么不使用单个列表视图。试试这个，可能比你想要的要好

import 'package:flutter/material.dart';

final Color darkBlue = Color.fromARGB(255, 18, 32, 47);

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.dark().copyWith(scaffoldBackgroundColor: darkBlue),
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: SingleChildScrollView(
          child: MyWidget(),
        ),
      ),
    );
  }
}

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
          Container(
             width: double.infinity,
            color: Colors.red,
            child: _showFirstListView(),
          ),
          Container(
            width: double.infinity,
            color: Colors.blue,
            child: _showSecondListView(),
          ),
      ],
    );
  }

  Widget _showFirstListView() {
    return Column(
    children: [
      ...[1].map((item) => Text("first listview")), //just in case you want to build from list of items as you would do in ListView.builder
    ],
    );
  }

  Widget _showSecondListView() {
    return Column(
    children: [
      //usually you already have a list of items you want to display
      ...[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15].map((item) => Container(
            child: Column(
              children: <Widget>[
                SizedBox(
                  height: 15,
                ),
                Text("FirstLine"),
                SizedBox(
                  height: 15,
                ),
                Text("SecondLine"),
                SizedBox(
                  height: 15,
                ),
                Text("ThirdLine"),
              ],
            ),
          )), //just in case you want to build from list of items as you would do in ListView.builder
    ],
    );
  }
}

使用另一个ListView来包含_showFirstListView和_showSecondListView，而不是列

然后_showFirstListView和_showSecondListView中的ListView应该具有

shrinkWrap: true,
physics: ClampingScrollPhysics(),

演示：

使用另一个ListView来包含_showFirstListView和_showSecondListView，而不是列

然后_showFirstListView和_showSecondListView中的ListView应该具有

shrinkWrap: true,
physics: ClampingScrollPhysics(),

演示：

---

我不确定您想要的输出是什么？嘿，在第一个列表中删除feflible并在build func的列中使用Expanded。您在dartpad中发布了正确的内容。看看你的dartpad代码。你在dartpad上共享的代码不会在底部产生空格？@Shajedulany如果我同时使用Expanded，它将显示两个半屏幕。那不是我想要的。我希望两个列表视图都包含在wrap_内容中。@dlohani确实如此。它只显示第二个列表视图的半高。我不确定您想要的输出是什么？嘿，只需删除feflible并在第一个列表的build func列中使用Expanded。您在dartpad中发布了正确的内容。看看你的dartpad代码。你在dartpad上共享的代码不会在底部产生空格？@Shajedulany如果我同时使用Expanded，它将显示两个半屏幕。那不是我想要的。我希望两个列表视图都包含在wrap_内容中。@dlohani确实如此。它只显示第二个列表视图的一半高度。如果我同时使用Expanded，它将同时显示两个半屏幕。那不是我想要的。我希望两个listView都包含在wrap_内容中。我恐怕无法实现您当时想要实现的目标。如果你能发布一个简单的模拟文件，也许是个好主意。你不能打开dartpad？是的，我可以。第一个是松散的，第二个是使用空间。您看到第二个ListView只显示半屏幕了吗？它应该显示完整，这意味着蓝色应该填充，直到没有问题。如果我使用扩展为两者，它将显示两个半屏幕。那不是我想要的。我希望两个listView都包含在wrap_内容中。我恐怕无法实现您当时想要实现的目标。如果你能发布一个简单的模拟文件，也许是个好主意。你不能打开dartpad？是的，我可以。第一个是松散的，第二个是使用空间。您看到第二个ListView只显示半屏幕了吗？它应该显示完整，这意味着蓝色应该填充，直到没有问题。如果我使用扩展为两者，它将显示两个半屏幕。那不是我想要的。我想在wrap_内容中同时显示两个listView。只需尝试更改flex值。如果我同时使用Expanded，它将同时显示两个半屏幕。那不是我想要的。我希望两个listView都包含在wrap_内容中。请尝试更改flex值。