Flutter：如何创建 Wrap 小部件 - 溢出警告

Posted 2023-02-23

【中文标题】Flutter：如何创建 Wrap 小部件 - 溢出警告

【英文标题】：Flutter: How to create Wrap widget - Overflow warning

【发布时间】：2020-07-22 17:07:54

【问题描述】：

我正在用 Flutter 创建一个测验，我想创建一个 Wrap 小部件，因为有一些很长的问题（文本），不能放在一行中。我把 Wrap 小部件放在哪里了？我试图用 Wrap 小部件替换每个简单的 Row 小部件，但它们似乎都不起作用。还有一个链接，其中包含我遵循的如何使用 Wrap 小部件的说明：https://medium.com/flutter-community/flutter-wrap-widget-e1ee0b005b16 谢谢。这是我的代码：

`

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

class questionpage extends StatefulWidget 
  @override
  _questionpageState createState() => _questionpageState();


class _questionpageState extends State<questionpage> 

  int qnum = 0;
  int score = 0;
  int seconds = 10;

  @override
  Widget build(BuildContext context) 
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.indigoAccent[700],
        title: SafeArea(
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: <Widget>[
              Container(
                child: Text(
                  '$qnum/10        ',
                  style: TextStyle(
                    fontSize: 28,
                  ),
                ),
              ),
              Container(
                child: Text(
                  '$seconds',
                  style: TextStyle(
                    fontSize: 28,
                  ),
                ),
              ),
              Container(
                child: Text(
                  'Score: $score',
                  style: TextStyle(
                    fontSize: 28,
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
      body: Column(children: <Widget>[
        Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Container(
              margin: EdgeInsets.fromLTRB(0, 50, 0, 0),
              child: Text(
                'Question $qnum:',
                style: new TextStyle(
                  color: Colors.black,
                  fontSize: 32.0,
                  fontWeight: FontWeight.bold,
                  decoration: TextDecoration.underline,
                  decorationThickness: 3.0,
                ),
              ),
            ),
          ],
        ),
        Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Container(
              margin: EdgeInsets.fromLTRB(0, 5, 0, 0),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  Text(
                    'THIS IS THE LONGGGGGGGGGGG QUESTION',
                    style: new TextStyle(
                        color: Colors.black,
                        fontSize: 28.0,
                        fontWeight: FontWeight.bold
                    ),
                  ),
                ],
              ),
            ),
          ],
        ),
      ],),
    );
  



  [1]: https://i.stack.imgur.com/U4Aut.png

【问题讨论】：

这能回答你的问题吗？ Flutter - Wrap text on overflow, like insert ellipsis or fade

【参考方案1】：

你必须像这样制作内部RowWrap，然后是外部RowColumn或Wrap。

Column(// this could be wrap too
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Container(
                margin: EdgeInsets.fromLTRB(0, 5, 0, 0),
                child: Wrap(
                  alignment: WrapAlignment.center,
                  children: <Widget>[
                    Text(
                      'THIS IS THE LONGGGGGGGGGGG QUESTION',
                      softWrap: true,
                      style: new TextStyle(
                          color: Colors.black,
                          fontSize: 28.0,
                          fontWeight: FontWeight.bold),
                    ),
                  ],
                ),
              ),
            ],
          ),

如果您需要更多，请告诉我