如何保持“比例”？

Question

我在我的颤音应用程序中创建了入职程序:这是我的数据模型：

class Data {
 final String image;
 final String title;
 final String desc;

 Data(this.image, this.title, this.desc); }

 final List<Data> items = [
  Data('assets/1.png', '1', '1'),
  Data('assets/2.png', '2', '2'),
  Data('assets/3.png', '3', '3')
];

这是我的密码：

Scaffold(
  body: Stack(
    alignment: AlignmentDirectional.bottomCenter,
    children: [
      PageView.builder(
        controller: _pageController,
        itemBuilder: (BuildContext context, int index) {
          var item = items[index];
          return Container(
            decoration: BoxDecoration(
              image: DecorationImage(
                image: AssetImage(item.image),
                fit: BoxFit.cover,
              ),
            ),
            //bloc1  
            child: Padding(
              padding: const EdgeInsets.only(bottom: 80),
              child: Column(
                mainAxisAlignment: MainAxisAlignment.end,
                children: [Text(item.title), Text(item.desc)],
              ),
            ),
          );
        },
      ),
      //bloc 2
      SafeArea(
          child: Column(
        mainAxisAlignment: MainAxisAlignment.end,
        children: [
          const Padding(
            padding: EdgeInsets.only(bottom: 10, top: 10),
            child: Text('****dots indicators****'),
          ),
          TextButton(
            onPressed: () {},
            child: Text('Next'),
          )
        ],
      ))
    ],
  ),
);

这个onBoading由三个部分组成：

1. 背景图像
2. 文本块-block1
3. “低动作块”- block2.

我需要有一个小的固定距离之间的第1块和2-10 pх。但我也不能把block1和block2放在一起。我需要block1在主页上“在”PageView，block2。

现在我在用底部垫子。但这不是一个可靠的解决方案--这种大小可能会在不同的屏幕上发生变化--“重叠”将发生。

我怎样才能解决这个问题？任何建议-我会非常感激的。

Answer 1

如果您想将“页面指示点”定位在一个固定的相对位置，例如，从屏幕底部的10%，一个简单的解决方案是使用Align小部件。

但是，在您的情况下，您还必须将Column更改为MainAxisSize.min，这样它的高度将尽可能小，从而使您有足够的自由来决定将Column垂直放置在何处。例如：

      SafeArea(
        child: Align(
          alignment: Alignment(0, 0.95), // relative position
          child: Column(
            mainAxisSize: MainAxisSize.min, // make Column shorter
            children: [
              Text('****dots indicators****'),
              TextButton(
                onPressed: () {},
                child: Text('Next'),
              )
            ],
          ),
        ),
      ),

对于Align小部件的Align属性，值是从-1 to +1到0的(x, y)，以0为中心。例如，您可以使用对齐：Alignment(0, -0.5)使其水平中心，50%朝向垂直轴的顶部。