颤动位置固定等效

Question

是否可以固定屏幕中的对象，无论滚动如何都保持固定？

类似于 CSS 位置固定的内容。

Answer 1

您绝对可以定位 Stack widget using the 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 体内。如果您添加更多项目，您会发现列表在滚动时不会移动红色框。

Answer 2

您可以使用 Positioned widget in a Stack Widget with AspectRatio 小部件并像下面的代码一样使用 % 距离。

@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'),
                          ),
                    ),
            ],
          ),
        ),
      }),
    ),
  );
}
}

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

颤动位置固定等效

Flutter position fixed equivalent

dart

flutter