Flutter Flexible不在列内换行文字

Question

我正在尝试制作一个可能包含一些长文本的小部件，我希望将其换行。

我正在尝试使用“ Flexible”小部件来包装我的文本，但是它仍然溢出，并且我不知道出了什么问题。

这是正在发生的事情：

这是我与列相关的代码：

Container(
  child: Column(
    crossAxisAlignment: CrossAxisAlignment.start,
    children: [
      Text(
        'My Title text',
        style: TextStyle(
            fontWeight: FontWeight.bold,
            fontSize: 18.0,
            color: Colors.black),
      ),
      Text(
        'This is lower text',
        style: TextStyle(
            fontWeight: FontWeight.w200,
            fontSize: 16.0,
            color: Colors.black),
      ),
      Flexible(
        child: Text(
          'Here is some long text that I am expecting will go off of the screen.',
          style: TextStyle(
              fontWeight: FontWeight.normal,
              fontSize: 16.0,
              color: Colors.black),
        ),
      )
    ],
  ),
),

如果与它相关的是整个窗口小部件

Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Material(
        color: Colors.transparent,
        child: Container(
          height: 100.0,
          child: Padding(
            padding: EdgeInsets.all(8.0),
            child: Row(
              crossAxisAlignment: CrossAxisAlignment.stretch,
              children: [
                Padding(
                  padding: EdgeInsets.all(16.0),
                  child: Icon(
                    Icons.cake,
                    size: 60.0,
                  ),
                ),
                Container(
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Text(
                        'My Title text',
                        style: TextStyle(
                            fontWeight: FontWeight.bold,
                            fontSize: 18.0,
                            color: Colors.black),
                      ),
                      Text(
                        'This is lower text',
                        style: TextStyle(
                            fontWeight: FontWeight.w200,
                            fontSize: 16.0,
                            color: Colors.black),
                      ),
                      Flexible(
                        child: Text(
                          'Here is some long text that I am expecting will go off of the screen.',
                          style: TextStyle(
                              fontWeight: FontWeight.normal,
                              fontSize: 16.0,
                              color: Colors.black),
                        ),
                      )
                    ],
                  ),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }

Answer 1

您需要将容器放入行内展开小部件像这样

child: Row(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Padding(
                  padding: EdgeInsets.all(16.0),
                  child: Icon(
                    Icons.cake,
                    size: 60.0,
                  ),
                ),
                Expanded(child: Container(
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Text(
                        'My Title text',
                        style: TextStyle(
                            fontWeight: FontWeight.bold,
                            fontSize: 18.0,
                            color: Colors.black),
                      ),
                      Text(
                        'This is lower text',
                        style: TextStyle(
                            fontWeight: FontWeight.w200,
                            fontSize: 16.0,
                            color: Colors.black),
                      ),
                      Flexible(
                        child: Text(
                          'Here is some long text that I am expecting will go off of the screen.',
                          softWrap: true,
                          style: TextStyle(
                              fontWeight: FontWeight.normal,
                              fontSize: 16.0,
                              color: Colors.black),
                        ),
                      )
                    ],
                  ),
                ),
             ) ],
            ),

问题是，如果您没有将容器放入展开状态，则行小部件会一直将其自身扩展到水平位置，并且会溢出。

Answer 2

尝试一下，您需要在此处调整包含文本的列的宽度。

工作代码：-

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

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        // This is the theme of your application.
        //
        // Try running your application with "flutter run". You'll see the
        // application has a blue toolbar. Then, without quitting the app, try
        // changing the primarySwatch below to Colors.green and then invoke
        // "hot reload" (press "r" in the console where you ran "flutter run",
        // or simply save your changes to "hot reload" in a Flutter IDE).
        // Notice that the counter didn't reset back to zero; the application
        // is not restarted.
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  // This widget is the home page of your application. It is stateful, meaning
  // that it has a State object (defined below) that contains fields that affect
  // how it looks.

  // This class is the configuration for the state. It holds the values (in this
  // case the title) provided by the parent (in this case the App widget) and
  // used by the build method of the State. Fields in a Widget subclass are
  // always marked "final".

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {

  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Material(
        color: Colors.transparent,
        child: Container(
          height: 100.0,
          child: Padding(
            padding: EdgeInsets.all(8.0),
            child: Row(
              crossAxisAlignment: CrossAxisAlignment.stretch,
              children: [
                Padding(
                  padding: EdgeInsets.all(16.0),
                  child: Icon(
                    Icons.cake,
                    size: 60.0,
                  ),
                ),
                Container(
                  child: Flexible(
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        Text(
                          'My Title text',
                          style: TextStyle(
                              fontWeight: FontWeight.bold,
                              fontSize: 18.0,
                              color: Colors.black),
                        ),
                        Text(
                          'This is lower text',
                          style: TextStyle(
                              fontWeight: FontWeight.w200,
                              fontSize: 16.0,
                              color: Colors.black),
                        ),
                        Flexible(
                          child: Text(
                            'Here is some long text that I am expecting will go off of the screen.',
                            style: TextStyle(
                                fontWeight: FontWeight.normal,
                                fontSize: 16.0,
                                color: Colors.black),
                            maxLines: 2,
                          ),
                        )
                      ],
                    ),
                  ),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

Answer 3

您可以使用此处扩展。 Expanded，它强制孩子扩展以填充可用空间。您可以在此处展开​​列。

这是列的代码段：-

Expanded(
                  child: Container(
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        Text(
                          'My Title text',
                          style: TextStyle(
                              fontWeight: FontWeight.bold,
                              fontSize: 18.0,
                              color: Colors.black),
                        ),
                        Text(
                          'This is lower text',
                          style: TextStyle(
                              fontWeight: FontWeight.w200,
                              fontSize: 16.0,
                              color: Colors.black),
                        ),
                        Flexible(
                          child: Text(
                            'Here is some long text that I am expecting will go off of the screen.',
                            style: TextStyle(
                                fontWeight: FontWeight.normal,
                                fontSize: 16.0,
                                color: Colors.black),
                          ),
                        )
                      ],
                    ),
                  ),
                )

这是您期望的：-

希望它会起作用。