如何在 Flutter 中将多行放在一行中？答案

【问题标题】：How to put multiple Rows inside one Row in Flutter?如何在 Flutter 中将多行放在一行中？
【发布时间】：2021-07-05 05:59:42
【问题描述】：

我想在一个 Row 小部件中放置两个列表。代码是什么样的：

Row(
  children: [
    Expanded(child: ListView(children: [TabItem(), TabItem()])),
    Row(children: [TextButton(), IconButton()]),
  ],
)

我发现我不能将两个列表都包装在Expanded 或Flexible 中，因为这两个小部件会将空间分成两半，或者它们会按百分比分割空间。

对于左侧列表，我希望它是可滚动且灵活的，就像在 CSS flex: auto 中所做的那样。

对于正确的列表，我想在其中添加一些按钮，就像在 CSS flex: 0 0 auto 中所做的那样。

【问题讨论】：

它有什么问题？

标签： flutter dart

【解决方案1】：

我认为您的代码没有任何问题。只是不要忘记将宽度设置为 IconButton，因为 IconButton 没有被任何定义其宽度的小部件包裹。

import 'package:flutter/material.dart';
void main() {
  runApp(
    MaterialApp(
      home: MyWidget(),
    ),
  );
}

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Row(
          children: [
            Expanded(child: ListView(children: [
              Container(height:100,color:Colors.blue), 
            Container(height:100,color:Colors.blue),
            Container(height:100,color:Colors.blue),
            Container(height:100,color:Colors.blue)])),
            Row(children: [Text("1"), Text("2")]),
          ],),
      ),
    );
  }
}`

【讨论】：