如果文本较长，则 Flutter 中断文本并展开容器

Question

我有一个 Container，还有一个 Text 作为 child。问题是我的 text 在右边溢出了。但实际上我想让它破裂，父容器应该展开。

这是现在的样子：

还有我的代码：

  Widget build(BuildContext context) {
return GestureDetector(
  onTap: onTap,
  child: Padding(
    padding: EdgeInsets.only(
      bottom: 14.scaled,
    ),
    child: Container(
      // height: 70.scaled,
      decoration: BoxDecoration(
        boxShadow: [verySoftDarkShadow],
        color: white,
        borderRadius: BorderRadius.circular(10.scaled),
      ),
      child: Row(
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          SizedBox(
            width: 20.scaled,
          ),
          Column(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Text(
                shortArticle.label!,
                style: alternativeText,
              ),
              Text(
                shortArticle.manufacturerLabel ?? '',
                style: alternativeText.copyWith(color: darkGray),
              ),
            ],
          ),
          Spacer(),
          SvgIconButton(
            onTap: () {
              print('tapped');
            },
            svgPath: 'images/vertical_menue_dots.svg',
            width: touchTargetSizeForIconButton,
            height: touchTargetSizeForIconButton,
            svgSize: 16.scaled,
          ),
        ],
      ),
    ),
  ),
);


}
}

我尝试将 text-widget 包裹在 Expanded 中，但这只会让它溢出而不显示任何内容。我在这里错过了什么？我该如何解决这个问题？

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

Answer 1

在您的文本小部件中添加：

maxLines: null

Answer 2

只需用 Expanded 包装 Column 小部件，并向 Text 小部件添加一个 'overflow' 参数。
（因为我不知道预定义的样式和资产，所以我自己改了。）

根据您的代码参考以下 'buildWidget' 函数。

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

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

  final String title;

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

class _MyHomePageState extends State<MyHomePage> {
  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: _buildBody(),
      floatingActionButton: FloatingActionButton(
        onPressed: () {},
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }

  Widget _buildBody() {
    return Container(
      padding: EdgeInsets.symmetric(horizontal: 10, vertical: 20),
      child: Column(children: [
        buildWidget(),
        buildWidget(),
      ]),
    );
  }
}

Widget buildWidget() {
  return GestureDetector(
    onTap: () {},
    child: Padding(
      padding: EdgeInsets.only(
        bottom: 14,
      ),
      child: Container(
        // height: 70.scaled,
        // decoration: BoxDecoration(
        //   boxShadow: [verySoftDarkShadow],
        //   color: white,
        //   borderRadius: BorderRadius.circular(10.scaled),
        // ),
        child: Row(
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            SizedBox(
              width: 20,
            ),
            Expanded(
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Text(
                    'shortArticle.label!shortArticle.label!shortArticle.l!shortArticle.label!',
                    // overflow: TextOverflow.ellipsis,
                    style: TextStyle(fontSize: 13, fontWeight: FontWeight.bold),
                  ),
                  Text(
                    'asdfasdf',
                    style: TextStyle(fontSize: 11),
                  ),
                ],
              ),
            ),
            Icon(
              Icons.favorite,
              color: Colors.pink,
              size: 24.0,
              semanticLabel: 'Text to announce in accessibility modes',
            ),
          ],
        ),
      ),
    ),
  );
}

如果文本较长，则 Flutter 中断文本并展开容器

Flutter break text and expand container if text is longer

text

constraints

widget

dart

flutter