我正在制作警报通知，我希望容器围绕它的内容。无法为圆形容器给予左边框，必须制作另一个与父容器高度匹配的容器。现在，如果我为父容器提供高度，这似乎不是一个好方法，因为容器内的文本可能会发生变化...我希望容器能够自动检测外观所需的高度，并且容器中的小部件不会重叠或超过
Container(
width: double.infinity,
height: 80.0,
padding: EdgeInsets.fromLTRB(0.0, 0.0, 0.0, 0.0),
decoration: BoxDecoration(
color: Theme.of(context).colorScheme.inversePrimary,
borderRadius: BorderRadius.all(Radius.circular(10.0)),
boxShadow: [
BoxShadow(
color: Theme.of(context).colorScheme.primary,
spreadRadius: 0,
blurRadius: 1,
offset: const Offset(0, 1)
), // no shadow color set, defaults to black
]
),
child: Row(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Expanded(
flex: 1,
child: Container(
width: 8,
padding: EdgeInsets.all(0.0),
height: MediaQuery.of(context).size.height,
decoration: BoxDecoration(
borderRadius: BorderRadius.only(topLeft: Radius.circular(10.0),bottomLeft:Radius.circular(10.0) ),
color: buildMaterialColor(const Color(0xFF70AD47)),
),
),
),
Expanded(
flex: 40,
child: Container(
padding:EdgeInsets.all(8.0),
child: Row(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children:[
Expanded(
flex: 1,
child: Text(
textAlign: TextAlign.end,
String.fromCharCode( CupertinoIcons.check_mark_circled.codePoint),
style: TextStyle(
inherit: false,
color: buildMaterialColor(const Color(0xFF70AD47)).shade400,
fontSize: 40.0,
fontFamily: CupertinoIcons.check_mark_circled.fontFamily,
package: CupertinoIcons.check_mark_circled.fontPackage,
),
),
),
Expanded(
flex:5,
child: Container(
padding: EdgeInsets.only(left:10.0,right: 0.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
"Success",
style: TextStyle(
inherit: false,
color: buildMaterialColor(const Color(0xFF70AD47)).shade400,
fontSize: 16.0,
),
),
Text(
"lorem ipsum de feacto de jure lorem ipsum de feacto de jure",
style: TextStyle(
overflow: TextOverflow.clip,
inherit: false,
color: Theme.of(context).colorScheme.onPrimaryContainer,
fontSize: 14.0,
),
),
],
)
),
),
]
),
),
),
Expanded(
flex: 5,
child: Container(
child: IconButton(
onPressed: (){},
icon: Icon(
Icons.close_rounded,
color: buildMaterialColor(const Color(0xFF70AD47)).shade400,
size: 16.0,
),
),
),
)
],
)
),
4条答案
按热度按时间z9ju0rcb1#
您可以删除height属性，并使用展开的www.example.com Package 父容器小部件，如下所示：widget.it should look like this: i hope this helps.
yrdbyhpb2#
认为你的项目建设喜欢，没有必要提供弹性。使用扩展到可用的空间。
测试小部件。
1zmg4dgp3#
请删除
MediaQuery.of(context).size.height其余的是
krugob8w4#
试试这个
你会得到这样的结果，我把文本增加了三倍，然后 checkout 结果，我也删除了container for border，然后用container的border属性创建了左边界：
