Question

我想创建一个行，左边有一个listview构建器，右边是一个容器或文本列。我尝试了以下代码，但显示空白屏幕

Widget invSection1 = Row(
    children: <Widget>[
      ListView.builder(
        itemCount: 1, // the length
        shrinkWrap: true,
        itemBuilder: (context, index) {
          return Container(
            child: Card(
                child: SingleChildScrollView(
                    child: Column(
                      mainAxisSize: MainAxisSize.min,
                      children:  new List.generate(
                        10,
                            (index) => new ListTile(
                          title: Text('Item $index'),
                          subtitle: Text('Item $index subtitle'),
                          trailing: Icon(Icons.shop_two),
                        ),
                      ),
                    )
                )
            ),
          );
        }),
      Expanded(
        child: Text('Craft beautiful UIs', textAlign: TextAlign.center),
      )
]);

Answer 1

这是预期的行为。连续的任何小部件都具有无限的空间可水平扩展。 ListView的宽度没有限制，将尝试占用最大的可用空间。

您可以做的是限制ListView可用的水平空间。这可以通过许多方法来完成，例如。就像将其包装在SizedBox中并设置有限宽度一样。

Answer 2

在这种情况下，您必须给父级一些宽度，因为父级可以根据子级调整自身大小，因为您使用的是Row小部件，并且使用listview不允许它进行特定的约束。只需查看示例：

import 'package:flutter/material.dart';

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

class MyApp extends StatefulWidget {
  MyApp({Key key}) : super(key: key);

  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  Widget invSection1 = Row(
    
    children: <Widget>[
    Container(
      width: 200,
      child: ListView.builder(
          itemCount: 1, // the length
          shrinkWrap: true,
          itemBuilder: (context, index) {
            return Container(
              child: Card(
                  child: SingleChildScrollView(
                      child: Column(
                mainAxisSize: MainAxisSize.min,
                children: new List.generate(
                  10,
                  (index) => new ListTile(
                    title: Text('Item $index'),
                    subtitle: Text('Item $index subtitle'),
                    trailing: Icon(Icons.shop_two),
                  ),
                ),
              ))),
            );
          }),
    ),
    Expanded(child: Text('Craft beautiful UIs', textAlign: TextAlign.center))
  ]);
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: SafeArea(child: invSection1),
      ),
    );
  }
}

颤振listview和列并排

2 个答案: