コンポーネントを円形に配置

1990 ワード
flutter プロペラ テキストリンク
特定の中心を基準として部品の周りを円形に配置したい.
最初に試した方法は大体2つあります.
  • StackとPositizedを使用して、コンポーネントを円形に統一します.
  • は円形に配置されているように見えますが、正確ではありません.
  • デバイスの画面スケールが変更された場合に対応できません.
  • ColumnまたはRowを使用して、コンポーネントが円形に見える場合でも、コンポーネントを配置します.
  • も同様に、デバイスの画面割合の変化に対応できない.
  • 構成間隔は調整できません.
  • 配置するものが7個ではなく9個、11個なら?やっぱり対応できない.
    • だから検索するとき.
    Stack、Positived、Transformクラスは、より容易に実現できます.
    コードは次のとおりです.
    まず三角関数(sin,cos)のmathと
    三角関数の角度(弧)を変換するvectormath.省道を導入する.
    import 'dart:math';
import 'package:vector_math/vector_math.dart' show radians;
    showはvector mathです.dartに属するメソッドでアークのみが使用されることを示します.
    Stackのalignationプロパティを中心にします.
    Transformを使用して、コンポーネントを中心に回転させます.
    radiusは回転半径です.
    Transform(
     transform: Matrix4.identity()
     ..translate(radius * cos(radians(30)),      
     radius*sin(radians(30))),
     child: Text('위젯')
)

    半径r、回転30度
    コード全体を以下に示します.
    import 'package:flutter/material.dart';
import 'dart:math';
import 'package:vector_math/vector_math.dart' show radians;

class TestPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {

    final radius = 100;

    return Scaffold(
      body: Container(
          child: Center(
              child: Stack(
                alignment: Alignment.center,
                children: [
                  Text('위젯'),
                  Transform(
                      transform: Matrix4.identity()
                      ..translate(radius * cos(radians(30)), 
                      radius * sin(radians(30))),
                      child: Text('위젯')
                  ),
                ],
              )
          )
      ),
    );
  }
}
    グロスハッカーとは?
    [Algorithm] BaekJoon : 20040. 自転車ゲームbypython