时间戳

首页 > 解决方案 > 如何在 Flutter 中将多行放在一行中？

flutter - 如何在 Flutter 中将多行放在一行中？

问题描述

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

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

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

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

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

标签： flutterdart

解决方案

我认为您的代码没有任何问题。只是不要忘记将宽度设置为 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")]),
          ],),
      ),
    );
  }
}`

推荐阅读