flutter - 文本小部件 softWrap 在 Flutter 中的嵌套行-列-行中不起作用

Question

我正在尝试在打击代码中包装文本“非常棒的超长文本，理想情况下应该是软变形”。尝试使用 Flexible 和 Expanded，没有用。

让 softWrap 在嵌套的行列场景中工作变得越来越困难:(

import 'package:flutter/material.dart';
import 'package:sample/models/Reward.dart';

class RewardDetailsView extends StatelessWidget {
  final Reward _reward;

  RewardDetailsView(this._reward);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        elevation: 0,
      ),
      body: Container(
        child: SingleChildScrollView(
          padding: EdgeInsets.all(16.0),
          child: Column(
            children: <Widget>[
              Row(

                crossAxisAlignment: CrossAxisAlignment.start,
                children: <Widget>[
                  Icon(Icons.wallpaper),
                  SizedBox(width: 16.0),
                  Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: <Widget>[

                      Text(
                        'Benefits',
                        style: TextStyle(
                          fontSize: 14.0,
                          fontWeight: FontWeight.w600,
                          color: Colors.grey[600],
                        ),
                      ),

                      Row(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: <Widget>[
                          Padding(
                            padding: const EdgeInsets.only(top: 4.0),
                            child: Icon(
                              Icons.arrow_right,
                              size: 10.0,
                            ),
                          ),
                          SizedBox(width: 8.0),
                          Text(
                            'Awesome somthing very long text which should ideally soft warp',
                            softWrap: true,
                          ),
                        ],
                      ),

                      Row(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: <Widget>[
                          Padding(
                            padding: const EdgeInsets.only(top: 4.0),
                            child: Icon(
                              Icons.arrow_right,
                              size: 10.0,
                            ),
                          ),
                          SizedBox(width: 8.0),
                          Text(
                            'Awesome somthing very long text which should ideally soft warp',
                            softWrap: true,
                          ),
                        ],
                      ),

                    ],
                  ),
                ],
              ),
            ],
          ),
        ),
      ),
    );
  }
}

下面是代码的输出。如果我在 Text 小部件周围添加 Flexible，它就会从屏幕上消失。

Answer 1

您在小部件树中使用了嵌套行。在那种情况下，用 Expanded 小部件包装小部件将不起作用，因为如果父元素是 Row 或 Column<，则框架无法为其布局宽度 小部件。

这是基于您的示例的工作代码示例。

  class RewardDetailsView extends StatelessWidget {
  final dynamic _reward = 'asdfasdfsd';
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        elevation: 0,
      ),
      body: Container(
        child: SingleChildScrollView(
          padding: EdgeInsets.all(16.0),
          child: Column(
            children: <Widget>[
              Row(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: <Widget>[
                  Icon(Icons.wallpaper),
                  SizedBox(width: 16.0),
                  Expanded(  // Wrap this column inside an expanded widget so that framework allocates max width for this column inside this row
                      child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: <Widget>[
                      Text(
                        'Benefits',
                        style: TextStyle(
                          fontSize: 14.0,
                          fontWeight: FontWeight.w600,
                          color: Colors.grey[600],
                        ),
                      ),
                      Row(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: <Widget>[
                          Padding(
                            padding: const EdgeInsets.only(top: 4.0),
                            child: Icon(
                              Icons.arrow_right,
                              size: 10.0,
                            ),
                          ),
                          SizedBox(width: 8.0),
                          Expanded( // Then wrap your text widget with expanded
                              child: Text(
                                'Awesome somthing very long text which should ideally soft warp lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorm ipsum',
                                softWrap: true,
                              )),
                        ],
                      ),
                      Row(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: <Widget>[
                          Padding(
                            padding: const EdgeInsets.only(top: 4.0),
                            child: Icon(
                              Icons.arrow_right,
                              size: 10.0,
                            ),
                          ),
                          SizedBox(width: 8.0),
                          Text(
                            'Awesome somthing very long text which should ideally soft warp',
                            softWrap: true,
                          ),
                        ],
                      ),
                    ],
                  )),
                ],
              ),
            ],
          ),
        ),
      ),
    );
  }
}