@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Title Text'),
),
body: SafeArea(
child: Stack(children: [
Column(
children: const [
Text('short content'),
],
),
const Positioned(
top: 100,
width: 320,
child: SizedBox(
width: 320,
height: 50,
child: ColoredBox(color: Colors.red),
))
])),
);
我需要幾乎占據整個螢屏的紅色框，但它會流動文本寬度。我應該如何進行這項作業？
uj5u.com熱心網友回復：
用: Stack_SizedBox
SizedBox(
width: double.infinity,
child: Stack(
clipBehavior: Clip.none,
children: [
SizedBox(
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: const [
Text('short content'),
],
),
),
Positioned(
top: 100,
right: 0,
left: 0,
child: Container(
height: 50,
color: Colors.red,
))
],
),
),
uj5u.com熱心網友回復：
您可以用or包裹堆疊的所有子項，以便可以正確地布置它們。AlignPositionedStack
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Title Text'),
),
body: SafeArea(
child: Stack(
children: [
/// The column is now positioned.
Positioned(
top: .0,
left: .0,
child: Column(
children: const [
ColoredBox(color: Colors.amber, child: Text('short content'))
],
),
),
const Positioned(
top: 100.0,
width: 320.0,
height: 50.0,
child: ColoredBox(color: Colors.red),
)
],
),
),
);
}
輸出：
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/535605.html
標籤：扑颤振布局