flutter - Flutter Wrap 溢出的文本

Question

            title: Text("Campaign Information"),
            children: <Widget>[
              Row(
                children: <Widget>[
                  Column(
                    children: <Widget>[
                      Row(
                        children: <Widget>[
                          Text("Long Long Information1"),
                          SizedBox(width: 10),
                          Container(
                            width: 100,
                            child: TextFormField(
                              maxLength: 10,
                              maxLines: 1,
                            ),
                          )
                        ],
                      ),
                      Row(
                        children: <Widget>[
                          Text("222"),
                          SizedBox(width: 10),
                          Container(
                            width: 100,
                            child: TextFormField(
                              maxLength: 10,
                              maxLines: 1,
                            ),
                          )
                        ],
                      ),
                    ],
                  ),
                  Column(
                    children: <Widget>[
                      Row(
                        children: <Widget>[
                          Text("Long Long Information2"),
                          SizedBox(width: 10),
                          Container(
                            width: 100,
                            child: TextFormField(
                              maxLength: 10,
                              maxLines: 1,
                            ),
                          ),
                        ],
                      ),
                      Row(
                        children: <Widget>[
                          Text("333"),
                          SizedBox(width: 10),
                          Container(
                            width: 100,
                            child: TextFormField(
                              maxLength: 10,
                              maxLines: 1,
                            ),
                          ),
                        ],
                      ),
                    ],
                  ),
                ],
              ),
              SizedBox(width: 50),
            ],
          ),

我是 Flutter 的新手，我试图用 ExpansionTile 创建一个表单，这个项目将能够在桌面模式和移动模式下显示。我试图将“information2”包装在“information1”下方，我研究了有关包装的所有文档，并尽我所能，但文本会展开并从小屏幕溢出。有谁知道如何实现这一目标？赞赏！

Answer 1

有很多方法可以解决这个错误。

您可以通过使用Expanded小部件和flex.

title: Text("Campaign Information"),
          children: <Widget>[
            Row(
              children: <Widget>[
                Expanded(
                  flex: 1,
                  child: Column(
                    children: <Widget>[
                      Row(
                        children: <Widget>[
                          Expanded(child: Text("Long Long Information1"),flex: 1,),
                          SizedBox(width: 10),
                          Expanded(
                            flex: 1,
                            child: Container(
                              width: 100,
                              child: TextFormField(
                                maxLength: 10,
                                maxLines: 1,
                              ),
                            ),
                          )
                        ],
                      ),
                      Row(
                        children: <Widget>[
                          Expanded(child: Text("222"), flex: 1,),
                          SizedBox(width: 10),
                          Expanded(
                            flex: 1 ,
                            child: Container(
                              width: 100,
                              child: TextFormField(
                                maxLength: 10,
                                maxLines: 1,
                              ),
                            ),
                          )
                        ],
                      ),
                    ],
                  ),
                ),
                SizedBox(width: 10),
                Expanded(
                  flex: 1,
                  child: Column(
                    children: <Widget>[
                      Row(
                        children: <Widget>[
                          Expanded(child: Text("Long Long Information2"), flex: 1,),
                          SizedBox(width: 10),
                          Expanded(
                            flex: 1,
                            child: Container(
                              width: 100,
                              child: TextFormField(
                                maxLength: 10,
                                maxLines: 1,
                              ),
                            ),
                          ),
                        ],
                      ),
                      Row(
                        children: <Widget>[
                          Expanded(child: Text("333"), flex: 1,),
                          SizedBox(width: 10),
                          Expanded(
                            flex: 1,
                            child: Container(
                              width: 100,
                              child: TextFormField(
                                maxLength: 10,
                                maxLines: 1,
                              ),
                            ),
                          ),
                        ],
                      ),
                    ],
                  ),
                ),
              ],
            ),
            SizedBox(width: 50),
          ],

---

如果您希望 UI 的文本最多为一行，请使用overflow和maxLine键，如下所示：

Text("Some text", maxLines: 1, overflow: TextOverflow.ellipsis,),

Answer 2

如果你想包装使用Wrap小部件！

干得好：

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: BarneAnestesi(),
      ),
    );
  }
}

class BarneAnestesi extends StatefulWidget {
  @override
  _BarneAnestesiState createState() => _BarneAnestesiState();
}

class _BarneAnestesiState extends State<BarneAnestesi> {
  String alder;
  final List<String> items = ['Nyfødt', '2 mnd.', '1 år', '2 år', '4 år', '7 år'];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: new Column(
        children: <Widget>[
          Wrap(
            children: <Widget>[
              Column(
                children: <Widget>[
                  Row(
                    children: <Widget>[
                      Text("Long Long Information1"),
                      SizedBox(width: 10),
                      Container(
                        width: 100,
                        child: TextFormField(
                          maxLength: 10,
                          maxLines: 1,
                        ),
                      )
                    ],
                  ),
                  Row(
                    children: <Widget>[
                      Text("222"),
                      SizedBox(width: 10),
                      Container(
                        width: 100,
                        child: TextFormField(
                          maxLength: 10,
                          maxLines: 1,
                        ),
                      )
                    ],
                  ),
                ],
              ),
              Column(
                children: <Widget>[
                  Row(
                    children: <Widget>[
                      Text("Long Long Information2"),
                      SizedBox(width: 10),
                      Container(
                        width: 100,
                        child: TextFormField(
                          maxLength: 10,
                          maxLines: 1,
                        ),
                      ),
                    ],
                  ),
                  Row(
                    children: <Widget>[
                      Text("333"),
                      SizedBox(width: 10),
                      Container(
                        width: 100,
                        child: TextFormField(
                          maxLength: 10,
                          maxLines: 1,
                        ),
                      ),
                    ],
                  ),
                ],
              ),
            ],
          ),
          SizedBox(width: 50),
        ],
      ),
    );
  }
}

Answer 3

您还可以使用 FittedBox() 包装您的小部件