Flutter：如何创建两列布局，每列布局具有不同大小的可滚动 ListView

Question

我正在尝试在 Flutter 中创建一个两列布局，左侧有一个 ListView，右侧有一列中有三个容器。我遇到的问题是右边的容器需要能够随着数据的变化而扩展，最终导致RenderFlex溢出。

使用 SingleChildScrollView，列滚动正常，但一旦超过视口约束，我就会收到错误消息。我已经使用 MediaQuery 设置了行的高度，但这似乎没有效果。 下面的示例代码模拟了这种情况...点击AppBar中的添加按钮，增加容器中文本的大小。

import 'package:flutter/material.dart';

class Test extends StatefulWidget {
  @override
  _TestState createState() => _TestState();
}

class _TestState extends State<Test> {
  List<String> _students = ['Gianluca','Lindsay','Leah','U','Marco','Liam','Harrison','Charise','Ting Wei','Ryan','Deena','Xiao Yuan','Benjamin','Calvin','Claudia','Kok Hao','Michalina','Ruby','Rachel','Nadir','Dan','Raaid','Nadia','Matilda','Lloyd','Arielle','Jun','Desmond','Miah','Aiden','Kira','Nathan','Thung Thung','Miki','Yongyou','Brogan','Zai Chern','Gondini','Ella','Germaine'];
  String textData = "";
  int current = 0;
  bool init = true;

  @override
  void initState() {
    addName();
    super.initState();
  }

  addName(){
    if(init){
      for(int i=0; i<_students.length;i++){
        textData+= _students[i]+ "   ";
      }
    } else {
      textData += _students[current] + "   ";
      if (current > _students.length) {
        current = 0;
      } else {
        current++;
      }
    }
    setState(() {
    });
    print(textData);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        actions: [
          FlatButton(
            onPressed: (){
              addName();
            },
            child: Icon(
              Icons.add,
            ),
          ),
        ],
      ),
      body: Row(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Expanded(
            child: SingleChildScrollView(
              child: Column(
                children: [
                  Container(
                    color: Colors.yellow,
                    height: MediaQuery.of(context).size.height,
                    child: ListView.builder(
                      itemCount: _students.length,
                      itemBuilder: (context, index) {
                        return new Text(_students[index]);
                      },
                    ),
                  ),
                ],
              ),
            ),
          ),
          Expanded(
            child: SingleChildScrollView(
              child: Column(
                children: [
                  Container(
                    color: Colors.green,
                    height: MediaQuery.of(context).size.height,
                    child: Column(
                      children: <Widget>[
                        Container(
                          color: Colors.red,
                          child: Text(textData),
                        ),
                        Container(
                          color: Colors.green,
                          child: Text(textData),
                        ),
                        Container(
                          color: Colors.blue,
                          child: Text(textData),
                        ),
                      ],
                    ),
                  ),
                ],
              ),
            ),
          ),
        ],
      ),
    );
  }
}

Answer 1

您可以将ListViews 用于Columns 进行简化：

import 'package:flutter/material.dart';

void main() {
  runApp(
    MaterialApp(
      title: 'Scan with',
      home: Scaffold(
        body: Test(),
      ),
    ),
  );
}

class Test extends StatefulWidget {
  @override
  _TestState createState() => _TestState();
}

class _TestState extends State<Test> {
  List<String> _students = [
    'Gianluca',
    'Lindsay',
    'Leah',
    'U',
    'Marco',
    'Liam',
    'Harrison',
    'Charise',
    'Ting Wei',
    'Ryan',
    'Deena',
    'Xiao Yuan',
    'Benjamin',
    'Calvin',
    'Claudia',
    'Kok Hao',
    'Michalina',
    'Ruby',
    'Rachel',
    'Nadir',
    'Dan',
    'Raaid',
    'Nadia',
    'Matilda',
    'Lloyd',
    'Arielle',
    'Jun',
    'Desmond',
    'Miah',
    'Aiden',
    'Kira',
    'Nathan',
    'Thung Thung',
    'Miki',
    'Yongyou',
    'Brogan',
    'Zai Chern',
    'Gondini',
    'Ella',
    'Germaine'
  ];
  String textData = "";
  int current = 0;
  bool init = true;

  @override
  void initState() {
    addName();
    super.initState();
  }

  addName() {
    if (init) {
      for (int i = 0; i < _students.length; i++) {
        textData += _students[i] + "   ";
      }
    } else {
      textData += _students[current] + "   ";
      if (current > _students.length) {
        current = 0;
      } else {
        current++;
      }
    }
    setState(() {});
    print(textData);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        actions: [
          FlatButton(
            onPressed: () {
              addName();
            },
            child: Icon(
              Icons.add,
            ),
          ),
        ],
      ),
      body: Row(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Expanded(
            child: ListView(children: [
              Container(
                color: Colors.yellow,
                height: MediaQuery.of(context).size.height,
                child: ListView.builder(
                  itemCount: _students.length,
                  itemBuilder: (context, index) {
                    return new Text(_students[index]);
                  },
                ),
              ),
            ]),
          ),
          Expanded(
            child: ListView(
              children: [
                Container(
                  color: Colors.red,
                  child: Text(textData),
                ),
                Container(
                  color: Colors.green,
                  child: Text(textData),
                ),
                Container(
                  color: Colors.blue,
                  child: Text(textData),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}

Answer 2

在 Expanded 小部件中设置 ListView 具有 flex 属性，您可以根据 flex 属性设置 2 List 的比例宽度，Expanded 的默认 flex 为 1，例如：如果您希望 List 2 宽两倍清单 1 你设置了 flex = 2。

Row(
children:[
Expanded(flex: 1, child: Text('List 1'),),
Expanded(flex: 2, child: Text('List 2'),),
]
),