Question

所以我有这个结构

正如您从图像中看到的，我有一个堆栈，其中有两个孩子 Container & SignalCardLabel 。在容器中我设置了高度，但现在我想让它更动态。现在，这是我的脚本

 Container(
        height: 117,
        padding: EdgeInsets.all(10),
        margin: EdgeInsets.only(left: 16, right: 16),
        decoration: BoxDecoration(
          color: Colors.white,
          borderRadius: BorderRadius.all(
            Radius.circular(8),
          ),
          boxShadow: [
            BoxShadow(
              color: Colors.grey.withOpacity(0.5),
              spreadRadius: 5,
              blurRadius: 7,
              offset: Offset(0, 3), // changes position of shadow
            ),
          ],
        ),
        child: //Expanded ),

我尝试删除高度，但它抛出了这个

RenderFlex children have non-zero flex but incoming height constraints are unbounded.

然后我试图用扩展包装它，但仍然显示相同的结果。以防万一你需要我的完整脚本

这是我的SignalCardLabel

class SignalCardLabel extends StatelessWidget {
  Color chipColor;
  String signalActionType;
  SignalCardLabel({this.chipColor, this.signalActionType});
  @override
  Widget build(BuildContext context) {
    return Positioned(
      right: 0,
      top: 0,
      child: Container(
        decoration: BoxDecoration(
          shape: BoxShape.rectangle,
          color: chipColor,
          borderRadius: BorderRadius.only(
            topLeft: Radius.zero,
            topRight: Radius.circular(8.0),
            bottomLeft: Radius.circular(30.0),
            bottomRight: Radius.zero,
          ),
        ),
        margin: EdgeInsets.only(left: 16, right: 16),
        child: Padding(
          padding: EdgeInsets.only(left: 20, top: 2, bottom: 2, right: 9),
          child: Text(
            signalActionType,
            style: TextStyle(color: Colors.white),
          ),
        ),
      ),
    );
  }
}

Answer 1

用 Container 包裹您的 Positioned.fill。它创建一个 Positioned 对象，左、上、右和下设置为 0.0，除非传递了它们的值。

您不能在那里使用 Expanded，它必须仅放置在 Column、Row 或 Flex 小部件内。

示例：

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Stack example',
      home: Scaffold(
          appBar: AppBar(
            title: Text('Stack example'),
          ),
          body: SingleChildScrollView(
            child: Column(
              children: [
                Stack(
                  children: [
                    Positioned.fill(
                      child: Container(
                        color: Colors.cyan,
                      ),
                    ),
                    ListView.builder(
                      physics: NeverScrollableScrollPhysics(),
                      shrinkWrap: true,
                      itemCount: 60,
                      itemBuilder: (context, index) => Text('Item # $index'),
                    ),
                  ],
                ),
              ],
            ),
          )),
    );
  }
}

UPD： 使用 Stack 时，您不能相对于其大小或堆栈自身的大小来定位子项 删除那里的 Positioned。除非您将在 Stack 中拥有第三个孩子，否则您正在尝试做的事情将如下所示：

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Stack example',
      home: Scaffold(
          appBar: AppBar(
            title: Text('Stack example'),
          ),
          body: SingleChildScrollView(
            child: Column(
              mainAxisSize: MainAxisSize.min,
              children: [
                Stack(
                  children: [
                    Positioned.fill(
                      child: Container(
                        color: Colors.cyan,
                      ),
                    ),
                    Container(
                      decoration: BoxDecoration(
                        shape: BoxShape.rectangle,
                        color: Colors.red,
                        borderRadius: BorderRadius.only(
                          topLeft: Radius.zero,
                          topRight: Radius.circular(8.0),
                          bottomLeft: Radius.circular(30.0),
                          bottomRight: Radius.zero,
                        ),
                      ),
                      margin: EdgeInsets.only(left: 16, right: 16),
                      child: Padding(
                        padding: EdgeInsets.only(
                            left: 20, top: 2, bottom: 2, right: 9),
                        child: Text(
                          'This is an example',
                          style: TextStyle(color: Colors.white),
                        ),
                      ),
                    )
                  ],
                ),
              ],
            ),
          )),
    );
  }
}

使容器高度跟随项目

1 个答案: