在Flutter上擺脫突出顯示的紅色條紋

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或），讓撲知道，這是確定崩潰了。您也可以使用Stack（提供處理溢出的選項）或ListView（可滾動）。如果您使用的是Text小部件，那麼您可以通過幾種方法來選擇想要限制溢出的方式。

在您發佈的示例中，我認爲Stack和Positioned的組合會按照您的要求進行操作。您必須至少設置一個非空屬性Positioned以使其成爲「定位」小部件，從而防止其確定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()), 
)); 
}