Question

当我的内容超出屏幕时，如何摆脱Flutter上突出显示的繁文缛节？它可能与调试模式有关，因为我在发布时没有看到它，但如果没有它，仍然可以在调试模式下运行我的构建。

编辑：这是一个将溢出的实现示例：

class OverflowExample extends StatefulWidget {
@override
State createState() {
    return new OverflowExampleState();
}
}

class OverflowExampleState extends State<OverflowExample> {
@override
Widget build(BuildContext context) {
    return new Row(
        children: [
            new column(
                new Container(height: 100, width: 200),
                new Container(height: 100, width: 200),
                new Container(height: 100, width: 200),
                new Container(height: 100, width: 200),
                new Container(height: 100, width: 200),
                new Container(height: 100, width: 200),
                new Container(height: 100, width: 200),
            ),
            new column(
                new Container(height: 100, width: 200),
                new Container(height: 100, width: 200),
                new Container(height: 100, width: 200),
                new Container(height: 100, width: 200),
                new Container(height: 100, width: 200),
                new Container(height: 100, width: 200),
                new Container(height: 100, width: 200),
            ),
            new column(
                new Container(height: 100, width: 200),
                new Container(height: 100, width: 200),
                new Container(height: 100, width: 200),
                new Container(height: 100, width: 200),
                new Container(height: 100, width: 200),
                new Container(height: 100, width: 200),
                new Container(height: 100, width: 200),
            ),
            new column(
                new Container(height: 100, width: 200),
                new Container(height: 100, width: 200),
                new Container(height: 100, width: 200),
                new Container(height: 100, width: 200),
                new Container(height: 100, width: 200),
                new Container(height: 100, width: 200),
                new Container(height: 100, width: 200),
            ),
            new column(
                new Container(height: 100, width: 200),
                new Container(height: 100, width: 200),
                new Container(height: 100, width: 200),
                new Container(height: 100, width: 200),
                new Container(height: 100, width: 200),
                new Container(height: 100, width: 200),
                new Container(height: 100, width: 200),
            ),
        ]
    )
}
}

Answer 1

该条带表示您有内容溢出，并且还会将错误记录到控制台。通过告诉Flutter如何处理溢出来解决这些问题是最好的。

您可以将内容包装在Flexible或Expanded中（如果您使用的是Column或Row），以便让Flutter了解内容。可以垮掉它。您还可以使用Stack（提供处理溢出的选项）或ListView（可以滚动）。如果您正在使用Text窗口小部件，则有多种选项可用于修剪溢出的方式。

在您发布的示例中，我认为Stack和Positioned的组合可以满足您的需求。您必须至少设置Positioned的一个非null属性才能使其成为＆＃34;定位＆＃34;小部件，阻止它确定Stack的维度。您可以使用overflow属性配置溢出行为。

import 'package:flutter/material.dart';

class OverflowExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Stack(
      overflow: Overflow.visible,
      children: <Widget>[
        new Positioned(
          top: 0.0,
          child: new Row(
            children: [
              new Column(
                children: [
                  new Container(
                    height: 100.0, width: 200.0, child: new Text('1')),
                  new Container(
                    height: 100.0, width: 200.0, child: new Text('2')),
                  new Container(
                    height: 100.0, width: 200.0, child: new Text('3')),
                  new Container(
                    height: 100.0, width: 200.0, child: new Text('4')),
                  new Container(
                    height: 100.0, width: 200.0, child: new Text('5')),
                  new Container(
                    height: 100.0, width: 200.0, child: new Text('6')),
                  new Container(
                    height: 100.0, width: 200.0, child: new Text('7')),
                  new Container(
                    height: 100.0, width: 200.0, child: new Text('8')),
                ],
              ),
              new Column(
                children: [
                  new Container(
                    height: 100.0, width: 200.0, child: new Text('1')),
                  new Container(
                    height: 100.0, width: 200.0, child: new Text('2')),
                  new Container(
                    height: 100.0, width: 200.0, child: new Text('3')),
                  new Container(
                    height: 100.0, width: 200.0, child: new Text('4')),
                  new Container(
                    height: 100.0, width: 200.0, child: new Text('5')),
                  new Container(
                    height: 100.0, width: 200.0, child: new Text('6')),
                  new Container(
                    height: 100.0, width: 200.0, child: new Text('7')),
                  new Container(
                    height: 100.0, width: 200.0, child: new Text('8')),
                ],
              ),
            ],
          ),
        ),
      ],
    );
  }
}

void main() {
  ScrollController _scrollController = new ScrollController(
  );
  runApp(new MaterialApp(
    home: new Material(child: new OverflowExample()),
  ));
}

摆脱Flutter上突出显示的红色条纹

1 个答案: