如何在 Flutter 中对齐嵌套列表？

Question

我想以这样的方式对齐以下嵌套列表，即黑线应位于绿色框（父列表）的水平中心，我无法添加任何填充或额外空间或定位或增加红色列宽度

请注意黑线仅供参考，该行实际上不是代码的一部分

dartpad 准备代码在这里

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Horizontal List of Vertical Lists')),
        body: ParentLayout(),
      ),
    );
  }
}

class ParentLayout extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        // Header content (Green Box at the top)
        Container(
          height: 100,
          width: 200,
        
          color: Colors.green[100],
          child: Center(child: Text("Parent ListView Content Above")),
        ),

        // Horizontal layout with dividing line centered to green boxes
        Expanded(
          child: Row(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              // Blue List
              _generateBlueList(),

              // Dividing line
     
              // Red List
              _generateRedList(),
            ],
          ),
        ),

        // Footer content (Green Box at the bottom)
        Container(
          height: 100,
          width: 200,
          color: Colors.green[100],
          child: Center(child: Text("Parent ListView Content Below")),
        ),
      ],
    );
  }

  // Generate blue list with varying sizes
  Widget _generateBlueList() {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: List.generate(
        5,
        (innerIndex) => Container(
          height: 40 + (innerIndex * 25), // Varying height
          width: 80 + (innerIndex * 40), // Varying width
          color: Colors.blue[100 * (innerIndex + 1)],
          child: Center(
            child: Text(
              'Blue $innerIndex',
              style: TextStyle(color: Colors.white),
            ),
          ),
        ),
      ),
    );
  }

  // Generate red list with fixed sizes
  Widget _generateRedList() {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: List.generate(
        5,
        (innerIndex) => Container(
          height: 60, // Fixed height
          width: 100, // Fixed width
          color: Colors.red[100 * (innerIndex + 1)],
          child: Center(
            child: Text(
              'Red $innerIndex',
              style: TextStyle(color: Colors.white),
            ),
          ),
        ),
      ),
    );
  }
}

Answer 1

这就是你想要的，

只需更改绿色和红色容器两列的一些横轴对齐方式，我就添加了扩展的小部件。

这是您重构的代码：

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Horizontal List of Vertical Lists')),
        body: ParentLayout(),
      ),
    );
  }
}

class ParentLayout extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        // Header content (Green Box at the top)
        Container(
          width: 200,
          color: Colors.green[100],
          child: Center(child: Text("Parent ListView Content Above")),
        ),

        // Horizontal layout with dividing line centered to green boxes
        Expanded(
          child: Row(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              // Blue List
              Expanded(child: _generateBlueList()),

              

              // Red List
              Expanded(child: _generateRedList()),
            ],
          ),
        ),

        // Footer content (Green Box at the bottom)
        Container(
          width: 200,
          color: Colors.green[100],
          child: Center(child: Text("Parent ListView Content Below")),
        ),
      ],
    );
  }

  // Generate blue list with varying sizes
  Widget _generateBlueList() {
    return Column(
      mainAxisAlignment: MainAxisAlignment.start,
      crossAxisAlignment: CrossAxisAlignment.end,
      children: List.generate(
        5,
        (innerIndex) => Container(
          height: 40 + (innerIndex * 25), // Varying height
          width: 80 + (innerIndex * 40), // Varying width
          color: Colors.blue[100 * (innerIndex + 1)],
          child: Center(
            child: Text(
              'Blue $innerIndex',
              style: TextStyle(color: Colors.white),
            ),
          ),
        ),
      ),
    );
  }

  // Generate red list with fixed sizes
  Widget _generateRedList() {
    return Column(
      crossAxisAlignment : CrossAxisAlignment.start, 
      mainAxisAlignment: MainAxisAlignment.start,
      children: List.generate(
        5,
        (innerIndex) => Container(
          height: 60, // Fixed height
          width: 100, // Fixed width
          color: Colors.red[100 * (innerIndex + 1)],
          child: Center(
            child: Text(
              'Red $innerIndex',
              style: TextStyle(color: Colors.white),
            ),
          ),
        ),
      ),
    );
  }
}