Flutter 自习室 AlignmentGeometry

本文已参与「新人创作礼」活动，一起开启掘金创作之路

对齐的基类，可以使用Alignment和AlignmentDirectional。

Alignment

Alignment被用于Align布局。

class AlignPage extends StatefulWidget {
  const AlignPage({Key? key}) : super(key: key);

  @override
  _AlignPageState createState() => _AlignPageState();
}

class _AlignPageState extends BasePage<AlignPage, AlignPageViewModel> {
  @override
  Widget buildBody(BuildContext context) {
    return Center(
      child: Column(
        children: [
          Container(
            width: 300,
            height: 150,
            color: Colors.green,
            child: Consumer<AlignPageViewModel>(
              builder: (context, value, child) {
                return Align(
                  alignment: Alignment(value.x, value.y),
                  child: Container(
                    width: 50,
                    height: 50,
                    color: Colors.purple,
                  ),
                );
              },
            ),
          ),
          Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              const Text("X:"),
              Selector<AlignPageViewModel, double>(
                selector: (p0, p1) => p1.x,
                builder: (context, value, child) {
                  return Slider(
                    value: value,
                    min: -2,
                    max: 2,
                    onChanged: (value) {
                      viewModel
                        ..x = value
                        ..update();
                    },
                  );
                },
              )
            ],
          ),
          Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              const Text("Y:"),
              Selector<AlignPageViewModel, double>(
                selector: (p0, p1) => p1.y,
                builder: (context, value, child) {
                  return Slider(
                    value: value,
                    min: -2,
                    max: 2,
                    onChanged: (value) {
                      viewModel
                        ..y = value
                        ..update();
                    },
                  );
                },
              )
            ],
          ),
        ],
      ),
    );
  }

  @override
  AlignPageViewModel createViewModel() {
    return AlignPageViewModel();
  }
}

FractionalOffset(废弃被 Alignment取代)

是为了支持不支持Alignment的低版本



class FractionalOffsetPage extends StatefulWidget {
  const FractionalOffsetPage({Key? key}) : super(key: key);

  @override
  _FractionalOffsetPageState createState() => _FractionalOffsetPageState();
}

class _FractionalOffsetPageState
    extends BasePage<FractionalOffsetPage, FractionalOffsetPageViewModel> {
  @override
  Widget buildBody(BuildContext context) {
    return Center(
      child: Column(
        children: [
          Container(
            width: 300,
            height: 150,
            color: Colors.green,
            child: Consumer<FractionalOffsetPageViewModel>(
              builder: (context, value, child) {
                return Align(
                  alignment: FractionalOffset(value.x, value.y),
                  child: Container(
                    width: 50,
                    height: 50,
                    color: Colors.purple,
                  ),
                );
              },
            ),
          ),
          const Text("X:"),
          Selector<FractionalOffsetPageViewModel, double>(
            selector: (p0, p1) => p1.x,
            builder: (context, value, child) {
              return Row(
                children: [
                  Text("X:${value.toStringAsFixed(1)}"),
                  const Spacer(),
                  const Text("-2"),
                  Slider(
                    value: value,
                    min: -2,
                    max: 2,
                    onChanged: (value) {
                      viewModel
                        ..x = value
                        ..update();
                    },
                  ),
                  const Text("2"),
                ],
              );
            },
          ),
          const Text("Y:"),
          Selector<FractionalOffsetPageViewModel, double>(
            selector: (p0, p1) => p1.y,
            builder: (context, value, child) {
              return Row(
                children: [
                  Text("Y:${value.toStringAsFixed(1)}"),
                  const Spacer(),
                  const Text("-2"),
                  Slider(
                    value: value,
                    min: -2,
                    max: 2,
                    onChanged: (value) {
                      viewModel
                        ..y = value
                        ..update();
                    },
                  ),
                  const Text("2"),
                ],
              );
            },
          ),
        ],
      ),
    );
  }

  @override
  FractionalOffsetPageViewModel createViewModel() {
    return FractionalOffsetPageViewModel();
  }
}

AlignmentDirectional

当前书写方向的偏移量

LTR书写

RTL书写