我仍然无法使用 Flutter 布局小部件的方法。 我会删除或覆盖这个“空白”(见红色箭头)。 我如何将“图像”扩展到菜单栏?
正如您在下面的代码中看到的,我使用的是 Stack 小部件。 我不知道是什么在 Stack 小部件和 appbar 之间产生了“空白”?可能是因为 Crop 小部件(第三方包)。我现在会研究一下,但还是决定发布这个问题。
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: I10n.t('Playhouse'),
centerTitle: true,
automaticallyImplyLeading: false,
elevation: 0,
excludeHeaderSemantics: true,
),
endDrawer: const ScrapBookDrawer(),
body: Stack(
children: <Widget>[
Crop(
interactive: false,
backgroundColor: Colors.white,
dimColor: Colors.white,
controller: CropController(),
child: Image.memory(
base64.decode(
con.submodule['image'],
),
),
),
SafeArea(
child: Column(
children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
Flexible(
child: Text(
widget.subTask['subName'],
style: const TextStyle(
fontWeight: FontWeight.bold,
fontSize: 16,
),
),
),
const Flexible(
child: Text(
'Submodule description',
),
),
]),
const Spacer(),
Expanded(
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(30),
color: Colors.white),
child: Column(
children: <Widget>[
/// Task Name and Number
Padding(
padding: const EdgeInsets.only(
top: 30,
bottom: 20,
),
child: Text(
widget.subTask['name'],
style: const TextStyle(
fontSize: 26,
fontWeight: FontWeight.bold,
),
),
),
/// Short Description or Title
Padding(
padding: const EdgeInsets.only(
top: 10,
),
child: Text(widget.subTask['short_description']),
),
const SizedBox(height: 30),
Flexible(
child: SingleChildScrollView(
physics: const BouncingScrollPhysics(),
child: Text(widget.subTask['long_description']),
),
),
],
),
),
)
],
),
)
],
),
);
}
答案 0 :(得分:0)
看来这实际上是由于 Crop
小部件所致。它会自动确定图片的纵横比。您应该通过将 aspectRatio
参数添加到 CropController
来手动设置纵横比,如下所示:
Crop(
interactive: false,
backgroundColor: Colors.white,
dimColor: Colors.white,
controller: CropController(aspectRatio: 0.75),
child: Image.memory(
base64.decode(
con.submodule['image'],
),
),
)
在您的情况下,似乎 ~0.75 的纵横比效果最好,请尝试找到您的最佳值。