dart - 如何用文本在一行中显示 LinearProgressIndicator

Question

我想使用 Row 显示一些 Text，然后显示 LinearProgressIndicator，使用以下代码:

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {   @override   Widget build(BuildContext context) {
    return MaterialApp(
      title: 'MaterialApp',
      home: Scaffold(
          body: SafeArea(child: Row(
            children: <Widget>[
              Text('Start row'),
              LinearProgressIndicator(),
            ],
          ),)),
    );   } }

问题是当我将 Text 和 LinearProgressIndicator 包装在 Row 中时，没有任何显示。

当我删除 LinearProgressIndicator 时，我只能让 Row 显示 Text。当 Row 没有像这样使用时，我只能让 LinearProgressIndicator 显示:

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'MaterialApp',
      home: Scaffold(
          body: SafeArea(child: LinearProgressIndicator(),)),
    );
  }
}

这是没有 Row 的应用程序的样子。

Answer 1

当 LinearProgressIndicator 小部件位于行小部件内时，您应该为其设置宽度。控制台中的错误解释得很清楚:

BoxConstraints forces an infinite width. These invalid constraints were provided to RenderCustomPaint's layout() function by the following function, which probably computed the invalid constraints in question:

每个无边界的小部件都应该被包裹在类似扩展或灵活的小部件中:

在这种情况下:

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'MaterialApp',
      home: Scaffold(
          body: SafeArea(
        child: Row(
          children: <Widget>[
            Center( // this widget is not nessesary
              child: Text('Some text'),
            ),
            Expanded(child: LinearProgressIndicator()),
          ],
        ),
      )),
    );
  }
}

还有一个discussion here与此事有关。