Flutter单页面创建两个ListView及含Container的ListView实现咨询

Hey there! Let's break down your two Flutter questions step by step—these are super common layout scenarios, so I’ve got straightforward solutions for you.

The main gotcha here is that by default, a ListView tries to take up all available vertical space. If you just drop two into a Column without adjustments, you’ll get layout overflow errors. The fix is to use Expanded widgets to divide the screen space between them, or wrap everything in a SingleChildScrollView if you want the entire page to scroll.

Here’s a quick example using Expanded to split the space (you can adjust the flex value to change how much space each ListView takes):

import 'package:flutter/material.dart';

class DualListViewPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Two ListViews')),
      body: Column(
        children: [
          // First ListView: takes 1/3 of the available height
          Expanded(
            flex: 1,
            child: ListView.builder(
              itemCount: 10,
              itemBuilder: (context, index) {
                return ListTile(title: Text('First List Item #$index'));
              },
            ),
          ),
          // Second ListView: takes 2/3 of the available height
          Expanded(
            flex: 2,
            child: ListView.builder(
              itemCount: 15,
              itemBuilder: (context, index) {
                return ListTile(title: Text('Second List Item #$index'));
              },
            ),
          ),
        ],
      ),
    );
  }
}

If you need the whole page to scroll (instead of each ListView scrolling independently), wrap the Column in a SingleChildScrollView and add shrinkWrap: true + physics: NeverScrollableScrollPhysics() to each ListView. That way, the ListViews only take up the space their content needs, and scrolling is handled by the parent widget.

To replicate the styled container look from your example, we’ll wrap each ListView in a Container with custom decoration (like rounded corners, shadows, borders) and then arrange them in a scrollable layout.

Here’s a code example that matches the typical styled container ListView setup:

import 'package:flutter/material.dart';

class ListViewsInContainers extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('ListView in Styled Containers')),
      body: SingleChildScrollView(
        padding: const EdgeInsets.all(16),
        child: Column(
          children: [
            // First ListView in a shadowed container
            Container(
              margin: const EdgeInsets.only(bottom: 16),
              padding: const EdgeInsets.all(12),
              decoration: BoxDecoration(
                color: Colors.white,
                borderRadius: BorderRadius.circular(12),
                boxShadow: [
                  BoxShadow(
                    color: Colors.grey.withOpacity(0.3),
                    spreadRadius: 2,
                    blurRadius: 6,
                    offset: const Offset(0, 2),
                  ),
                ],
              ),
              child: ListView.builder(
                shrinkWrap: true,
                physics: const NeverScrollableScrollPhysics(),
                itemCount: 8,
                itemBuilder: (context, index) {
                  return Padding(
                    padding: const EdgeInsets.symmetric(vertical: 8),
                    child: Text(
                      'Container 1 - Item #$index',
                      style: const TextStyle(fontSize: 16),
                    ),
                  );
                },
              ),
            ),
            // Second ListView in a bordered container
            Container(
              padding: const EdgeInsets.all(12),
              decoration: BoxDecoration(
                color: Colors.white,
                borderRadius: BorderRadius.circular(12),
                border: Border.all(color: Colors.deepPurpleAccent, width: 2),
              ),
              child: ListView.builder(
                shrinkWrap: true,
                physics: const NeverScrollableScrollPhysics(),
                itemCount: 8,
                itemBuilder: (context, index) {
                  return Padding(
                    padding: const EdgeInsets.symmetric(vertical: 8),
                    child: Text(
                      'Container 2 - Item #$index',
                      style: const TextStyle(
                        fontSize: 16,
                        color: Colors.deepPurpleAccent,
                      ),
                    ),
                  );
                },
              ),
            ),
          ],
        ),
      ),
    );
  }
}

Key notes here:

• shrinkWrap: true tells the ListView to only take up the space its content requires (instead of expanding infinitely).
• physics: NeverScrollableScrollPhysics() disables internal scrolling for the ListViews, so the entire page scrolls smoothly via the SingleChildScrollView.
• Adjust the Container’s decoration properties (like boxShadow, border, borderRadius) to match your exact example’s styling.

内容的提问来源于stack exchange，提问作者Mohammed Achref Machat