颤振位置固定等效答案

【问题标题】：Flutter position fixed equivalent颤振位置固定等效
【发布时间】：2018-09-09 01:00:43
【问题描述】：

是否可以在屏幕上修复一个无论滚动如何都保持固定的对象？

类似于 CSS 位置固定的东西。

【问题讨论】：

【解决方案1】：

您可以使用Positioned 小部件绝对定位Stack 小部件的子级。

下面的最小示例将红色框放置在列表视图上方，方法是将子项放置在堆栈子项中的 ListView 之后的 Positioned 小部件中。

List<String> todos = [...];
return new Stack(
  children: <Widget>[
    new ListView(
     children: todos
       .map((todo) => new ListTile(title: new Text(todo)))
       .toList(),
     ),
     new Positioned(
       left: 30.0,
       top: 30.0,
       child: new Container(
         width: 100.0,
         height: 80.0,
         decoration: new BoxDecoration(color: Colors.red),
         child: new Text('hello'),
        )
      ),
   ],
);

这里它位于Scaffold 体内。如果您添加更多项目，您会发现列表滚动而不移动红色框。

【讨论】：

我正在使用 Stack 和 Positioned 但是当我在 Positioned Its child hide 中添加 left 或 right 或 bottom 或 top 属性时。
@AliAzad 定位的需要是堆栈的最后一个孩子

【解决方案2】：

您可以在带有AspectRatio 小部件的Stack 小部件中使用Positioned 小部件，并像下面的代码一样使用% 距离。

@override
Widget build(BuildContext context) {
Size size = MediaQuery.of(context).size; //get the screen size

List<String> todos = [...];

//the below if to get the aspect ratio of the screen i am using the app only in landscape
//if you need to use it in portrait you should add the sizes below
if((size.width / size.height) > 1.76){
  aspect = 16 / 9;
}else if((size.width / size.height) < 1.77 && (size.width / size.height) >= 1.6){
  aspect = 16 / 10;
}else{
  aspect = 4 /3;
}

return new Scaffold(
  body: new Center(
      //layoutBuilder i can use the constraints to get the width and height of the screen
      child: new LayoutBuilder(builder: (context, constraints) {
        return new AspectRatio(
          aspectRatio: aspect,
          child: new Column(
            children: <Widget>[
               new ListView(
                    children: todos
                    .map((todo) => new ListTile(title: new Text(todo)))
                    .toList(),
               ),
               new Positioned(
                    //constraints.biggest.height to get the height 
                    // * .05 to put the position top: 5%
                    top: constraints.biggest.height * .05,
                    left: constraints.biggest.width * .30,
                    child: new Container(
                              width: 100.0,
                              height: 80.0,
                              decoration: new BoxDecoration(color: Colors.red),
                              child: new Text('hello'),
                          ),
                    ),
            ],
          ),
        ),
      }),
    ),
  );
}
}

希望对你有所帮助....

【讨论】：

我正在使用 Stack 和 Positioned 但是当我在 Positioned Its child hide 中添加 left 或 right 或 bottom 或 top 属性时。