Flutter Positioned 组件

Positioned

这个使用控制Widget的位置，通过他可以随意摆放一个组件，有点像绝对布局

代码语言：javascript复制

Positioned({
  Key key,
  this.left,
  this.top,
  this.right,
  this.bottom,
  this.width,
  this.height,
  @required Widget child,
})

left、top 、right、 bottom分别代表离Stack左、上、右、底四边的距离

代码语言：javascript复制

import 'package:flutter/material.dart';

class PositionedPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
          title: Text('PositionedDemo'), backgroundColor: Colors.blue[400]),
      body: Container(
        color: Colors.orange[100],
        width: MediaQuery.of(context).size.width,
        height: MediaQuery.of(context).size.height,
        margin: EdgeInsets.all(15),
        child: Stack(
          children: <Widget>[
            Positioned(
                child:MaterialButton(
                  minWidth: 100,
                  onPressed: () {},
                  color: Colors.greenAccent,
                ),
              right:10,
              top: 10,
            ),
            Positioned(
              child:MaterialButton(
                minWidth: 100,
                height: 40,
                onPressed: () {},
                color: Colors.red,
              ),
              left: MediaQuery.of(context).size.width / 2 * 0.8,
              top: MediaQuery.of(context).size.height / 2 * 0.7,
            ),
            Positioned(
              child:MaterialButton(
                minWidth: 100,
                onPressed: () {},
                color: Colors.yellow,
              ),
              left: 10,
              bottom: 10,
            ),
          ],
        ),
      ),
    );
  }
}

demo 地址

Simulator Screen Shot - iPhone 11 Pro Max - 2019-09-24 at 15.21.03.png

max png screen simulator stack

0 人点赞