您可以在容器内使用align，而不是使用stack

@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,
      ),
    ),
  ),
);
}

您可以使用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。

使用扩展的小部件

@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,
        ),
       ),
      ),
    ],
  ),
);
}

对堆栈上的多行文本使用类似的布局。

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),
        ),
      ],
    ),
  ),
],
),

示例代码片段

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“），然后将其余文本替换为...”“。