相对于父级具有宽度和偏移的小部件

Question

我想渲染一些看起来有点像滚动条的东西，以表明我在 2/5 页上。为此，我需要一个小部件，其中包含以下内容：

• 宽度相对于父项的大小为 20% 的宽度
小部件
• 的左上角相对于父小部件的大小偏移 40%

我能够使用 FractionallySsizeBox 完成第一点，但我不确定如何组合它来完成偏移。谢谢！

这是一个 Flutter 代码笔，说明了我到目前为止所拥有的内容。我想相对于父级将其抵消 40%，同时仍保留 20% 的宽度。

https://codepen.io/venkatd-the-bashful/pen/jOWYQXz

以下示例片段

class PagePositionDisplay extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: SizedBox(
height: 30,
width: 300,
child: Container(
color: Colors.grey,
child: FractionallySizedBox(
alignment: Alignment.topLeft,
heightFactor: 1,
widthFactor: 0.2,
child: Container(
decoration: BoxDecoration(
shape: BoxShape.rectangle,
color: Colors.blue,
),
),
),
),
),
),
);
}
}

Answer 1

尝试使用布局生成器来处理一些行：

class PagePositionDisplay extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: SizedBox(
height: 30,
width: 300,
child: Container(
color: Colors.grey,
child: LayoutBuilder(builder: (context, constraints) {
return Row(
children: <Widget>[
SizedBox(
// your offset percentage * total width
width: (2 / 5) * constraints.maxWidth,
),
Container(
// your 'scrollbar' percentage * total width
width: (1 / 5) * constraints.maxWidth,
decoration: BoxDecoration(
shape: BoxShape.rectangle,
color: Colors.blue,
),
),
],
);
}),
),
),
),
);
}
}