點燈坊

失くすものさえない今が強くなるチャンスよ

Positioned 以座標定位

Sam Xiao's Avatar 2024-11-24

一般的切版會以 Padding, Row, Column 達成，而特殊的切版則會以 Positioned 實現。

Version

Flutter 3.24.5

Flutter

overview01

  • Android 與 iOS 都成功使用 Position 實現以座標定位

Positioned

import 'package:flutter/material.dart';

class Home extends StatelessWidget {
  const Home({super.key});

  @override
  Widget build(BuildContext context) {
    var appBar = AppBar(
      title: const Text('Positioned'),
    );

    var topRight = Positioned(
      top: 10,
      left: 10,
      child: Container(
        width: 100,
        height: 100,
        color: Colors.red,
        child: const Center(
          child: Text(
            'Top Left',
            style: TextStyle(
              color: Colors.white,
            ),
          ),
        ),
      ),
    );

    var baseContainer = Container(
      width: 300,
      height: 300,
      color: Colors.blue[100],
    );

    var body = Center(
      child: Stack(
        children: [
          baseContainer,
          topRight,
        ],
      ),
    );

    return MaterialApp(
      home: Scaffold(
        appBar: appBar,
        body: body,
      ),
    );
  }
}

Line 36

var body = Center(
  child: Stack(
    children: [
      baseContainer,
      topRight,
    ],
  ),
);
  • Stack：當要使用 Positioned 時，本身與欲參考 widget 都要放在 Stack 內
    • baseContainer：被 Positioned 所參考座標的 widget
    • topRight：使用 Positioned 的 widget

Line 30

var baseContainer = Container(
  width: 300,
  height: 300,
  color: Colors.blue[100],
);
  • baseContainer：被 Positioned 所參考座標的 widget

Line 12

var topRight = Positioned(
  top: 10,
  left: 10,
  child: Container(
    width: 100,
    height: 100,
    color: Colors.red,
    child: const Center(
      child: Text(
        'Top Left',
        style: TextStyle(
          color: Colors.white,
        ),
      ),
    ),
  ),
);
  • Positioned：將 widget 包在 Positioned 內，以 top、left 指定座標

Conclusion

  • Positioned 亦可以 bottom、right 指定座標
  • Positioned 必須搭配 Stack 使用

# Flutter