Flutter Positioned 組件

• 2019 年 10 月 7 日
• 筆記

Positioned

這個使用控制Widget的位置，通過他可以隨意擺放一個組件，有點像絕對布局

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

left、top 、right、 bottom分別代表離Stack左、上、右、底四邊的距離

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