如何在 Flutter 中将文本（放置在 Stack 小部件中）分成多行？

Question

我想在 Flutter 中实现以下设计，特别是上面放置了文本的圆角矩形。

我已经使用堆栈小部件将文本定位在容器的左下角，但问题是文本在堆栈边界之外的一行中，而不是进入第二行。 为了简单起见，我写了一个更简单的代码如下：

@override 
Widget build(BuildContext context) {
return Center(
  child: Stack(
    children: [
      Container(
        width: 150,
        height: 150,
        color: Colors.teal.shade300,
      ),
      const Positioned(
        left: 16,
        bottom: 16,
        child: Text(
          "A very looooooooooooooooong teeeeeeeext",
          maxLines: 2,
          softWrap: true,
        ),
      ),
    ],
  ),
);
}

结果是：

那么在这种情况下，如何将文本分成第二行（不是使用 \n 字符）。 或者，如果除了使用 Stack 之外还有其他解决方案，请告诉我。 谢谢。

Answer 1

您可以在容器内使用对齐而不是使用堆栈

@override
Widget build(BuildContext context) {
return Center(
  child: Container(
    width: 150,
    height: 150,
    color: Colors.teal.shade300,
    child: const Align(
      alignment: Alignment.bottomLeft,
      child: Text(
        "A very looooooooooooooooong teeeeeeeext",
        maxLines: 2,
        softWrap: true,
      ),
    ),
  ),
);
}

Answer 2

您可以使用 GridView 来实现以下设计。 像这样：

GridView(
  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
    crossAxisCount: 2,
    mainAxisSpacing: 16.0,
    crossAxisSpacing: 16.0,
  ),
  children: [
    Container(
      width: 150,
      height: 150,
      color: Colors.teal.shade300,
      child: Column(
        mainAxisAlignment: MainAxisAlignment.end,
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Text('title1'),
          Text('21222222222222222222222222222')
        ],
      ),
    ),
    Container(
      width: 150,
      height: 150,
      color: Colors.teal.shade300,
      child: Column(
        mainAxisAlignment: MainAxisAlignment.end,
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Text('title1'),
          Text('21222222222222222222222222222')
        ],
      ),
    ),
    Container(
      width: 150,
      height: 150,
      color: Colors.teal.shade300,
      child: Column(
        mainAxisAlignment: MainAxisAlignment.end,
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Text('title1'),
          Text('21222222222222222222222222222')
        ],
      ),
    ),
    Container(
      width: 150,
      height: 150,
      color: Colors.teal.shade300,
      child: Column(
        mainAxisAlignment: MainAxisAlignment.end,
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Text('title1'),
          Text('21222222222222222222222222222')
        ],
      ),
    ),
  ],
)

或者你可以使用 GridView.builder。

Answer 3

将文本小部件包装到容器中并给出容器高度和宽度

@override 
Widget build(BuildContext context) {
  return Center(
    child: Stack(
      children: [
        Container(
          width: 150,
          height: 150,
          color: Colors.teal.shade300,
        ),
        Positioned(
          left: 16,
          bottom: 16,
          child: Container(
            width: 120,
            height: 55,
            child: Text(
              "A very looo oooo ooo oo ooo oong teee eee eext",
              maxLines: 3,
              style: TextStyle(
                overflow: TextOverflow.ellipsis
              ),
           ),
         ),
      ],
    ),
  );
}

Answer 4

使用扩展小部件

@override 
Widget build(BuildContext context) {
return Center(
  child: Stack(
    children: [
      Container(
        width: 150,
        height: 150,
        color: Colors.teal.shade300,
      ),
      const Positioned(
        left: 16,
        bottom: 16,
        child: Expanded(
             Text(
          "A very looooooooooooooooong teeeeeeeext",
          maxLines: 2,
          softWrapenter code here: true,
        ),
       ),
      ),
    ],
  ),
);
}

Answer 5

对堆栈上的多行文本使用这样的布局。

Stack(

children: [

  CustomPaintCurves(),

  Positioned(

    top: 0.0,
    left: 0.0,
    right: 0.0,
    child: Column(
      children: <Widget>[
        Padding(
          padding: const EdgeInsets.all(8.0),
          child: Image.asset(
              AppAssets.icon_button_background,
              gaplessPlayback: true,
              fit: BoxFit.cover,
              height: 80,
              width: 80),
        ),
        const Padding(
          padding: EdgeInsets.all(8.0),
          child: Text(
            StringManager.appName,
            style: TextStyle(
              fontSize: 20.0,
              fontWeight: FontWeight.bold,
            ),
          ),
        ),
        const Padding(
          padding: EdgeInsets.all(8.0),
          child: Text(StringManager.aboutUsDescription),
        ),
      ],
    ),
  ),
],
),

Answer 6

示例代码片段

 Stack( children: [ //: other children in this stack Positioned( left, 20: //, giving it random position bottom: 20. width. MediaQuery.of(context).size,width * 0:80. //. so that the `Text` widget knows where it overflows child. const Text( "Some Very Long Text Here....,:.", //: the long text you want to clip overflow, TextOverflow:ellipsis, //, type of overflow softWrap, false, maxLines; 3, //! max lines before clipping the text ), ), ], );

解释：

为其容器的文本小部件（左下角）提供随机位置。 还为“定位”小部件提供了宽度，以便“文本”小部件知道文本实际溢出的位置以及需要应用溢出属性的位置。

我使用了“TextOverflow.ellipsis”，这样溢出的文本就会进入下一行，但我指定了我想看到的文本行数（即“maxLines: 3”），然后将其余文本替换为“。 ..'。

Answer 7

发生此问题是因为在堆栈内部您没有应用任何文本小部件（子小部件）的宽度，因此它不会占用任何宽度，因此在您的情况下将文本小部件包装到 SizeBox 中并应用宽度，它将起作用。

观看完整代码

import 'package:flutter/material.dart';

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

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

class MyHomePage extends StatefulWidget {
  final String title;

  const MyHomePage({
    Key? key,
    required this.title,
  }) : super(key: key);

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Stack(
          children: [
            Container(
              width: 150,
              height: 150,
              color: Colors.teal.shade300,
            ),
            const Positioned(
              left: 16,
              bottom: 16,
              child: SizedBox(
                width: 150,
           
                child: Text(
                  "A very looooooooooooooooong teeeeeeeext",
                  maxLines: 2,
                  softWrap: true,
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

查看结果