深海游弋的鱼 – 第 28 页 – 智障儿童欢乐多

理解Intellj IDEA/Android Studio警告'Optional' used as type for parameter

在函数的形参中使用 Optional 类型的参数的时候，编译的时候会被 Intellj IDEA/Android Studio 发出警告，代码如下：

import java.util.Optional;

public class OptionalDemo {

    private static void printOptionalString(Optional<String> message) {
        System.out.println(message.orElse("empty"));
    }

    public static void main(String[] args) {
        printOptionalString(Optional.of("hello"));
    }

}

import java.util.Optional;

public class OptionalDemo {

private static void printOptionalString(Optional<String> message) {

System.out.println(message.orElse("empty"));

}

public static void main(String[] args) {

printOptionalString(Optional.of("hello"));

}

警告信息如下：

'Optional<String>' used as type for parameter 'message'

1	'Optional<String>' used as type for parameter 'message'

对于这个警告，初期是非常迷惑的，不清楚为什么 Optional 类型不能作为函数的形参。后来搜索了一下网络，加上自己理解，才豁然开朗。

其实 Optional 类型产生的本身是为了避免空指针异常而引入的，如果在函数的形参中使用 Optional 类型，那么如果传入的 Optional 类型的参数本身就是 null 的话，就会在使用 Optional 参数的时候抛出空指针异常了。因此干脆就希望不要在函数的行参中使用 Optional 类型。

通过测试，Intellj IDEA/Android Studio 对于函数返回值，是不发出这个警告的。

接口的话，可以使用类似下面的写法来规避这个警告：

import java.util.Optional;

public class OptionalDemo {
    
    public static void main(String[] args) {
        OptionalCallback<Optional<String>> cb = new OptionalCallback<Optional<String>>() {
            @Override
            public void onOptionalFired(Optional<String> message) {
                System.out.println(message.orElse("empty"));
            }
        };
        cb.onOptionalFired(Optional.of("hello"));
    }

    private interface  OptionalCallback<T> {
        void onOptionalFired(T message);
    }
}

import java.util.Optional;

public class OptionalDemo {

public static void main(String[] args) {

OptionalCallback<Optional<String>> cb = new OptionalCallback<Optional<String>>() {

@Override

public void onOptionalFired(Optional<String> message) {

System.out.println(message.orElse("empty"));

}

};

cb.onOptionalFired(Optional.of("hello"));

}

private interface OptionalCallback<T> {

void onOptionalFired(T message);

}

虽然可以通过 @SuppressWarnings("OptionalUsedAsFieldOrParameterType") 来禁止这个警告的发出，但是还是建议遵守这个警告，尽量不要在函数的形参中使用 Optional 类型。

参考链接

Flutter CustomPaint自定义控件时钟

我们将用 CustomPaint 来绘制我们的时钟。CustomPaint 的重要参数 painter 和 size。painter 是一个继承了CustomPainter 的对象，主要实现了绘画控件的功能。size 指定了控件的大小，如果 CustomPaint 的 child 不为空，size 的值就是 child 控件的大小，指定 size 的值则无效；如果 child 为空，所指定的 size 的值，就是画布的大小。

  @override
  Widget build(BuildContext context) {
    return CustomPaint(
      painter: ClockPainter(datetime,
          numberColor: Colors.black,
          handColor: Colors.black,
          borderColor: Colors.black,
          radius: widget.radius),
      size: Size(widget.radius * 2, widget.radius * 2),
    );
  }

@override

Widget build(BuildContext context) {

return CustomPaint(

painter: ClockPainter(datetime,

numberColor: Colors.black,

handColor: Colors.black,

borderColor: Colors.black,

radius: widget.radius),

size: Size(widget.radius * 2, widget.radius * 2),

);

}

ClockPainter 继承了 CustomPainter，实现了其中两个重要方法：paint 和 shouldRepaint。paint 当自定义控件需要重画时被调用。shouldRepaint 则决定当条件变化时是否需要重画。

class ClockPainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
  }

  @override
  bool shouldRepaint(ClockPainter oldDelegate) {
    return true;
  }
}

class ClockPainter extends CustomPainter {

@override

void paint(Canvas canvas, Size size) {

}

@override

bool shouldRepaint(ClockPainter oldDelegate) {

return true;

}

首先先时钟的边框，代码如下，只需 drawCircle 就可以实现边框的绘制。

    //draw border
    final borderPaint = Paint()
      ..color = borderColor
      ..style = PaintingStyle.stroke
      ..strokeWidth = borderWidth;
    canvas.drawCircle(
        Offset(radius, radius), radius - borderWidth / 2, borderPaint);

//draw border

final borderPaint = Paint()

..color = borderColor

..style = PaintingStyle.stroke

..strokeWidth = borderWidth;

canvas.drawCircle(

Offset(radius, radius), radius - borderWidth / 2, borderPaint);

canvas 的起始点是画布的左上角坐标点为起点，即 x，y 都为零。drawCircle 画一个指定了半径的圆。圆的形状和样式由 Paint 对象指定。style 决定了是画圆盘（PaintingStyle.fill）还是圆环（PaintingStyle.stroke）。当 style 设定为PaintingStyle.stroke 时，strokeWidth 就是指定了圆环的宽度。

其次，可以画时钟刻度和数字了。

 List<Offset> secondsOffset = [];
   
    for (var i = 0; i < 60; i++) {
      Offset offset = Offset(
          cos(degToRad(6 * i - 90)) * secondDistance + radius,
          sin(degToRad(6 * i - 90)) * secondDistance + radius);
      secondsOffset.add(offset);
    }

    //draw second point
    final secondPPaint = Paint()
      ..strokeWidth = 2 * scale
      ..color = numberColor;
    if (secondsOffset.length > 0) {
      canvas.drawPoints(PointMode.points, secondsOffset, secondPPaint);
    }

List<Offset> secondsOffset = [];

for (var i = 0; i < 60; i++) {

Offset offset = Offset(

cos(degToRad(6 * i - 90)) * secondDistance + radius,

sin(degToRad(6 * i - 90)) * secondDistance + radius);

secondsOffset.add(offset);

}

//draw second point

final secondPPaint = Paint()

..strokeWidth = 2 * scale

..color = numberColor;

if (secondsOffset.length > 0) {

canvas.drawPoints(PointMode.points, secondsOffset, secondPPaint);

}

时钟的刻度占整个圆弧的 360/60=6 度，运用数学公式每个刻度点的坐标，然后用 drawPoints 画出每一个刻度点。

      canvas.save();
      canvas.translate(radius, radius);

      for (var i = 0; i < secondsOffset.length; i++) {
        if (i % 5 == 0) {
          //draw number
          canvas.save();
          canvas.translate(0.0, -radius + borderWidth * 4);
          textPainter.text = new TextSpan(
            text: "${(i ~/ 5) == 0 ? "12" : (i ~/ 5)}",
            style: TextStyle(
              color: numberColor,
              fontFamily: 'Times New Roman',
              fontSize: 28.0 * scale,
            ),
          );

          //helps make the text painted vertically
          canvas.rotate(-angle * i);

          textPainter.layout();
          textPainter.paint(canvas,
              new Offset(-(textPainter.width / 2), -(textPainter.height / 2)));
          canvas.restore();
        }
        canvas.rotate(angle);
      }
      canvas.restore();

canvas.save();

canvas.translate(radius, radius);

for (var i = 0; i < secondsOffset.length; i++) {

if (i % 5 == 0) {

//draw number

canvas.save();

canvas.translate(0.0, -radius + borderWidth * 4);

textPainter.text = new TextSpan(

text: "${(i ~/ 5) == 0 ? "12" : (i ~/ 5)}",

style: TextStyle(

color: numberColor,

fontFamily: 'Times New Roman',

fontSize: 28.0 * scale,

);

//helps make the text painted vertically

canvas.rotate(-angle * i);

textPainter.layout();

textPainter.paint(canvas,

new Offset(-(textPainter.width / 2), -(textPainter.height / 2)));

canvas.restore();

}

canvas.rotate(angle);

}

canvas.restore();

canvas.save() 保存当前画布，以便画完数字恢复。
canvas.translate(radius, radius) 把画布的起始点移到画布的中心。
再次保存画布后，再把起始点移到正上方位置，这里是把起始点数字 12 的位置。
TextPainter用来画文字。
canvas.rotate(-angle.toDouble() * i); 以当前画布起始点旋转一个角度，这是为了保证每个数字在下面旋转到对应的位置后保持竖直显示。
canvas.restore() 重置画布，即把画布的起始点定位到控件的中心位置。
canvas.rotate(angle.toDouble()) 以控件中心为原点旋转一个角度，即把数字旋转到对应的位置。数字 12 旋转角度为零，数字 1 旋转角度为 30 度。
所有的数字都画完并旋转到对应的位置后即可恢复起始点到控件的左上角。

最后，我们接着画时针，分针，秒针。

    final hour = datetime.hour;
    final minute = datetime.minute;
    final second = datetime.second;

    // draw hour hand
    Offset hourHand1 = Offset(
        radius - cos(degToRad(360 / 12 * hour - 90)) * (radius * 0.2),
        radius - sin(degToRad(360 / 12 * hour - 90)) * (radius * 0.2));
    Offset hourHand2 = Offset(
        radius + cos(degToRad(360 / 12 * hour - 90)) * (radius * 0.5),
        radius + sin(degToRad(360 / 12 * hour - 90)) * (radius * 0.5));
    final hourPaint = Paint()
      ..color = handColor
      ..strokeWidth = 8 * scale;
    canvas.drawLine(hourHand1, hourHand2, hourPaint);

    // draw minute hand
    Offset minuteHand1 = Offset(
        radius - cos(degToRad(360 / 60 * minute - 90)) * (radius * 0.3),
        radius - sin(degToRad(360 / 60 * minute - 90)) * (radius * 0.3));
    Offset minuteHand2 = Offset(
        radius +
            cos(degToRad(360 / 60 * minute - 90)) * (radius - borderWidth * 3),
        radius +
            sin(degToRad(360 / 60 * minute - 90)) * (radius - borderWidth * 3));
    final minutePaint = Paint()
      ..color = handColor
      ..strokeWidth = 3 * scale;
    canvas.drawLine(minuteHand1, minuteHand2, minutePaint);

    // draw second hand
    Offset secondHand1 = Offset(
        radius - cos(degToRad(360 / 60 * second - 90)) * (radius * 0.3),
        radius - sin(degToRad(360 / 60 * second - 90)) * (radius * 0.3));
    Offset secondHand2 = Offset(
        radius +
            cos(degToRad(360 / 60 * second - 90)) * (radius - borderWidth * 3),
        radius +
            sin(degToRad(360 / 60 * second - 90)) * (radius - borderWidth * 3));
    final secondPaint = Paint()
      ..color = handColor
      ..strokeWidth = 1 * scale;
    canvas.drawLine(secondHand1, secondHand2, secondPaint);

    final centerPaint = Paint()
      ..strokeWidth = 2 * scale
      ..style = PaintingStyle.stroke
      ..color = Colors.yellow;
    canvas.drawCircle(Offset(radius, radius), 4 * scale, centerPaint);

final hour = datetime.hour;

final minute = datetime.minute;

final second = datetime.second;

// draw hour hand

Offset hourHand1 = Offset(

radius - cos(degToRad(360 / 12 * hour - 90)) * (radius * 0.2),

radius - sin(degToRad(360 / 12 * hour - 90)) * (radius * 0.2));

Offset hourHand2 = Offset(

radius + cos(degToRad(360 / 12 * hour - 90)) * (radius * 0.5),

radius + sin(degToRad(360 / 12 * hour - 90)) * (radius * 0.5));

final hourPaint = Paint()

..color = handColor

..strokeWidth = 8 * scale;

canvas.drawLine(hourHand1, hourHand2, hourPaint);

// draw minute hand

Offset minuteHand1 = Offset(

radius - cos(degToRad(360 / 60 * minute - 90)) * (radius * 0.3),

radius - sin(degToRad(360 / 60 * minute - 90)) * (radius * 0.3));

Offset minuteHand2 = Offset(

radius +

cos(degToRad(360 / 60 * minute - 90)) * (radius - borderWidth * 3),

radius +

sin(degToRad(360 / 60 * minute - 90)) * (radius - borderWidth * 3));

final minutePaint = Paint()

..color = handColor

..strokeWidth = 3 * scale;

canvas.drawLine(minuteHand1, minuteHand2, minutePaint);

// draw second hand

Offset secondHand1 = Offset(

radius - cos(degToRad(360 / 60 * second - 90)) * (radius * 0.3),

radius - sin(degToRad(360 / 60 * second - 90)) * (radius * 0.3));

Offset secondHand2 = Offset(

radius +

cos(degToRad(360 / 60 * second - 90)) * (radius - borderWidth * 3),

radius +

sin(degToRad(360 / 60 * second - 90)) * (radius - borderWidth * 3));

final secondPaint = Paint()

..color = handColor

..strokeWidth = 1 * scale;

canvas.drawLine(secondHand1, secondHand2, secondPaint);

final centerPaint = Paint()

..strokeWidth = 2 * scale

..style = PaintingStyle.stroke

..color = Colors.yellow;

canvas.drawCircle(Offset(radius, radius), 4 * scale, centerPaint);

一个小时占时钟角度为 30 度，利用三角函数算出时针的两个点，用 drawLine 画出带宽度的时针。
每一分钟每一秒中所占的角度为 6 度，同样利用三角函数算出各自对应的两点，再画直线就可以得到分针，秒针。

完整的代码如下：

import 'dart:async';
import 'dart:math';
import 'dart:ui';

import 'package:flutter/material.dart';

class ClockPage extends StatefulWidget {
  final double radius;
  final Color hourHandColor;
  final Color minuteHandColor;
  final Color secondHandColor;
  final Color numberColor;
  final Color borderColor;

  const ClockPage(
      {Key? key,
      required this.hourHandColor,
      required this.minuteHandColor,
      required this.secondHandColor,
      required this.numberColor,
      required this.borderColor,
      this.radius = 150.0})
      : super(key: key);

  @override
  State<StatefulWidget> createState() {
    return ClockPageState();
  }
}

class ClockPageState extends State<ClockPage> {
  late DateTime datetime;
  late Timer timer;

  @override
  void initState() {
    super.initState();
    datetime = DateTime.now();
    timer = Timer.periodic(const Duration(seconds: 1), (timer) {
      setState(() {
        datetime = DateTime.now();
      });
    });
  }

  @override
  void dispose() {
    super.dispose();
    timer.cancel();
  }

  @override
  Widget build(BuildContext context) {
    return CustomPaint(
      painter: ClockPainter(datetime,
          numberColor: Colors.black,
          handColor: Colors.black,
          borderColor: Colors.black,
          radius: widget.radius),
      size: Size(widget.radius * 2, widget.radius * 2),
    );
  }
}

class ClockPainter extends CustomPainter {
  final Color handColor;
  final Color numberColor;
  final Color borderColor;
  final double radius;
  List<Offset> secondsOffset = [];
  final DateTime datetime;
  late TextPainter textPainter;
  late num angle;
  late double borderWidth;

  ClockPainter(this.datetime,
      {this.radius = 150.0,
      this.handColor = Colors.black,
      this.numberColor = Colors.black,
      this.borderColor = Colors.black}) {
    borderWidth = radius / 14;
    final secondDistance = radius - borderWidth * 2;
    //init seconds offset
    for (var i = 0; i < 60; i++) {
      Offset offset = Offset(
          cos(degToRad(6 * i - 90)) * secondDistance + radius,
          sin(degToRad(6 * i - 90)) * secondDistance + radius);
      secondsOffset.add(offset);
    }

    textPainter = TextPainter(
      textAlign: TextAlign.center,
      textDirection: TextDirection.rtl,
    );
    angle = degToRad(360 / 60);
  }

  @override
  void paint(Canvas canvas, Size size) {
    final scale = radius / 150;

    //draw border
    final borderPaint = Paint()
      ..color = borderColor
      ..style = PaintingStyle.stroke
      ..strokeWidth = borderWidth;
    canvas.drawCircle(
        Offset(radius, radius), radius - borderWidth / 2, borderPaint);

    //draw second point
    final secondPPaint = Paint()
      ..strokeWidth = 2 * scale
      ..color = numberColor;
    if (secondsOffset.isNotEmpty) {
      canvas.drawPoints(PointMode.points, secondsOffset, secondPPaint);

      canvas.save();
      canvas.translate(radius, radius);

      List<Offset> bigger = [];
      for (var i = 0; i < secondsOffset.length; i++) {
        if (i % 5 == 0) {
          bigger.add(secondsOffset[i]);

          //draw number
          canvas.save();
          canvas.translate(0.0, -radius + borderWidth * 4);
          textPainter.text = TextSpan(
            text: "${(i ~/ 5) == 0 ? "12" : (i ~/ 5)}",
            style: TextStyle(
              color: numberColor,
              fontFamily: 'Times New Roman',
              fontSize: 28.0 * scale,
            ),
          );

          //helps make the text painted vertically
          canvas.rotate(-angle.toDouble() * i);

          textPainter.layout();
          textPainter.paint(canvas,
              Offset(-(textPainter.width / 2), -(textPainter.height / 2)));
          canvas.restore();
        }
        canvas.rotate(angle.toDouble());
      }
      canvas.restore();

      final biggerPaint = Paint()
        ..strokeWidth = 5 * scale
        ..color = numberColor;
      canvas.drawPoints(PointMode.points, bigger, biggerPaint);
    }

    final hour = datetime.hour;
    final minute = datetime.minute;
    final second = datetime.second;

    // draw hour hand
    Offset hourHand1 = Offset(
        radius - cos(degToRad(360 / 12 * hour - 90)) * (radius * 0.2),
        radius - sin(degToRad(360 / 12 * hour - 90)) * (radius * 0.2));
    Offset hourHand2 = Offset(
        radius + cos(degToRad(360 / 12 * hour - 90)) * (radius * 0.5),
        radius + sin(degToRad(360 / 12 * hour - 90)) * (radius * 0.5));
    final hourPaint = Paint()
      ..color = handColor
      ..strokeWidth = 8 * scale;
    canvas.drawLine(hourHand1, hourHand2, hourPaint);

    // draw minute hand
    Offset minuteHand1 = Offset(
        radius - cos(degToRad(360 / 60 * minute - 90)) * (radius * 0.3),
        radius - sin(degToRad(360 / 60 * minute - 90)) * (radius * 0.3));
    Offset minuteHand2 = Offset(
        radius +
            cos(degToRad(360 / 60 * minute - 90)) * (radius - borderWidth * 3),
        radius +
            sin(degToRad(360 / 60 * minute - 90)) * (radius - borderWidth * 3));
    final minutePaint = Paint()
      ..color = handColor
      ..strokeWidth = 3 * scale;
    canvas.drawLine(minuteHand1, minuteHand2, minutePaint);

    // draw second hand
    Offset secondHand1 = Offset(
        radius - cos(degToRad(360 / 60 * second - 90)) * (radius * 0.3),
        radius - sin(degToRad(360 / 60 * second - 90)) * (radius * 0.3));
    Offset secondHand2 = Offset(
        radius +
            cos(degToRad(360 / 60 * second - 90)) * (radius - borderWidth * 3),
        radius +
            sin(degToRad(360 / 60 * second - 90)) * (radius - borderWidth * 3));
    final secondPaint = Paint()
      ..color = handColor
      ..strokeWidth = 1 * scale;
    canvas.drawLine(secondHand1, secondHand2, secondPaint);

    final centerPaint = Paint()
      ..strokeWidth = 2 * scale
      ..style = PaintingStyle.stroke
      ..color = Colors.yellow;
    canvas.drawCircle(Offset(radius, radius), 4 * scale, centerPaint);
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) {
    return true;
  }
}

num degToRad(num deg) => deg * (pi / 180.0);

num radToDeg(num rad) => rad * (180.0 / pi);

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

import 'dart:async';

import 'dart:math';

import 'dart:ui';

import 'package:flutter/material.dart';

class ClockPage extends StatefulWidget {

final double radius;

final Color hourHandColor;

final Color minuteHandColor;

final Color secondHandColor;

final Color numberColor;

final Color borderColor;

const ClockPage(

{Key? key,

required this.hourHandColor,

required this.minuteHandColor,

required this.secondHandColor,

required this.numberColor,

required this.borderColor,

this.radius = 150.0})

: super(key: key);

@override

State<StatefulWidget> createState() {

return ClockPageState();

}

class ClockPageState extends State<ClockPage> {

late DateTime datetime;

late Timer timer;

@override

void initState() {

super.initState();

datetime = DateTime.now();

timer = Timer.periodic(const Duration(seconds: 1), (timer) {

setState(() {

datetime = DateTime.now();

});

}

@override

void dispose() {

super.dispose();

timer.cancel();

}

@override

Widget build(BuildContext context) {

return CustomPaint(

painter: ClockPainter(datetime,

numberColor: Colors.black,

handColor: Colors.black,

borderColor: Colors.black,

radius: widget.radius),

size: Size(widget.radius * 2, widget.radius * 2),

);

}

class ClockPainter extends CustomPainter {

final Color handColor;

final Color numberColor;

final Color borderColor;

final double radius;

List<Offset> secondsOffset = [];

final DateTime datetime;

late TextPainter textPainter;

late num angle;

late double borderWidth;

ClockPainter(this.datetime,

{this.radius = 150.0,

this.handColor = Colors.black,

this.numberColor = Colors.black,

this.borderColor = Colors.black}) {

borderWidth = radius / 14;

final secondDistance = radius - borderWidth * 2;

//init seconds offset

for (var i = 0; i < 60; i++) {

Offset offset = Offset(

cos(degToRad(6 * i - 90)) * secondDistance + radius,

sin(degToRad(6 * i - 90)) * secondDistance + radius);

secondsOffset.add(offset);

}

textPainter = TextPainter(

textAlign: TextAlign.center,

textDirection: TextDirection.rtl,

);

angle = degToRad(360 / 60);

}

@override

void paint(Canvas canvas, Size size) {

final scale = radius / 150;

//draw border

final borderPaint = Paint()

..color = borderColor

..style = PaintingStyle.stroke

..strokeWidth = borderWidth;

canvas.drawCircle(

Offset(radius, radius), radius - borderWidth / 2, borderPaint);

//draw second point

final secondPPaint = Paint()

..strokeWidth = 2 * scale

..color = numberColor;

if (secondsOffset.isNotEmpty) {

canvas.drawPoints(PointMode.points, secondsOffset, secondPPaint);

canvas.save();

canvas.translate(radius, radius);

List<Offset> bigger = [];

for (var i = 0; i < secondsOffset.length; i++) {

if (i % 5 == 0) {

bigger.add(secondsOffset[i]);

//draw number

canvas.save();

canvas.translate(0.0, -radius + borderWidth * 4);

textPainter.text = TextSpan(

text: "${(i ~/ 5) == 0 ? "12" : (i ~/ 5)}",

style: TextStyle(

color: numberColor,

fontFamily: 'Times New Roman',

fontSize: 28.0 * scale,

);

//helps make the text painted vertically

canvas.rotate(-angle.toDouble() * i);

textPainter.layout();

textPainter.paint(canvas,

Offset(-(textPainter.width / 2), -(textPainter.height / 2)));

canvas.restore();

}

canvas.rotate(angle.toDouble());

}

canvas.restore();

final biggerPaint = Paint()

..strokeWidth = 5 * scale

..color = numberColor;

canvas.drawPoints(PointMode.points, bigger, biggerPaint);

}

final hour = datetime.hour;

final minute = datetime.minute;

final second = datetime.second;

// draw hour hand

Offset hourHand1 = Offset(

radius - cos(degToRad(360 / 12 * hour - 90)) * (radius * 0.2),

radius - sin(degToRad(360 / 12 * hour - 90)) * (radius * 0.2));

Offset hourHand2 = Offset(

radius + cos(degToRad(360 / 12 * hour - 90)) * (radius * 0.5),

radius + sin(degToRad(360 / 12 * hour - 90)) * (radius * 0.5));

final hourPaint = Paint()

..color = handColor

..strokeWidth = 8 * scale;

canvas.drawLine(hourHand1, hourHand2, hourPaint);

// draw minute hand

Offset minuteHand1 = Offset(

radius - cos(degToRad(360 / 60 * minute - 90)) * (radius * 0.3),

radius - sin(degToRad(360 / 60 * minute - 90)) * (radius * 0.3));

Offset minuteHand2 = Offset(

radius +

cos(degToRad(360 / 60 * minute - 90)) * (radius - borderWidth * 3),

radius +

sin(degToRad(360 / 60 * minute - 90)) * (radius - borderWidth * 3));

final minutePaint = Paint()

..color = handColor

..strokeWidth = 3 * scale;

canvas.drawLine(minuteHand1, minuteHand2, minutePaint);

// draw second hand

Offset secondHand1 = Offset(

radius - cos(degToRad(360 / 60 * second - 90)) * (radius * 0.3),

radius - sin(degToRad(360 / 60 * second - 90)) * (radius * 0.3));

Offset secondHand2 = Offset(

radius +

cos(degToRad(360 / 60 * second - 90)) * (radius - borderWidth * 3),

radius +

sin(degToRad(360 / 60 * second - 90)) * (radius - borderWidth * 3));

final secondPaint = Paint()

..color = handColor

..strokeWidth = 1 * scale;

canvas.drawLine(secondHand1, secondHand2, secondPaint);

final centerPaint = Paint()

..strokeWidth = 2 * scale

..style = PaintingStyle.stroke

..color = Colors.yellow;

canvas.drawCircle(Offset(radius, radius), 4 * scale, centerPaint);

}

@override

bool shouldRepaint(CustomPainter oldDelegate) {

return true;

}

num degToRad(num deg) => deg * (pi / 180.0);

num radToDeg(num rad) => rad * (180.0 / pi);

使用的代码如下：

const ClockPage(
  hourHandColor: Colors.black,
  minuteHandColor: Colors.black,
  secondHandColor: Colors.black,
  numberColor: Colors.black,
  borderColor: Colors.black),

const ClockPage(

hourHandColor: Colors.black,

minuteHandColor: Colors.black,

secondHandColor: Colors.black,

numberColor: Colors.black,

borderColor: Colors.black),

参考链接

Flutter CustomPaint自定义控件时钟

百度地图Poi检索、距离计算、调起百度地图

百度API的简单应用——PoiSearch

创建POI检索实例

在SDK组件初始化之后使用下列代码即可:

mPoiSearch = PoiSearch.newInstance();

1

mPoiSearch = PoiSearch.newInstance();

创建POI检索监听器

在同一个Activity中编写以下代码：

OnGetPoiSearchResultListener listener = new OnGetPoiSearchResultListener() { @Override public void onGetPoiResult(PoiResult poiResult) { } @Override public void onGetPoiDetailResult(PoiDetailSearchResult poiDetailSearchResult) { } @Override public void onGetPoiIndoorResult(PoiIndoorResult poiIndoorResult) { } //废弃 @Override public void onGetPoiDetailResult(PoiDetailResult poiDetailResult) { } };

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

OnGetPoiSearchResultListener listener = new OnGetPoiSearchResultListener() {
@Override
public void onGetPoiResult(PoiResult poiResult) {

}
@Override
public void onGetPoiDetailResult(PoiDetailSearchResult poiDetailSearchResult) {

}
@Override
public void onGetPoiIndoorResult(PoiIndoorResult poiIndoorResult) {

}
//废弃
@Override
public void onGetPoiDetailResult(PoiDetailResult poiDetailResult) {

}
};

其中onGetPoiResult是主要的回调函数，所以涉及到搜索结果的操作基本都放在这个函数中进行，在我的源码中，我把MainActivity当作一个OnGetPoiSearchResultListener，这样有利于简化代码

设置检索监听器

mPoiSearch.setOnGetPoiSearchResultListener(listener);

1

mPoiSearch.setOnGetPoiSearchResultListener(listener);

设置PoiCitySearchOption，发起检索请求

/** * PoiCiySearchOption 设置检索属性 * city 检索城市 * keyword 检索内容关键字 * pageNum 分页页码 */ mPoiSearch.searchInCity(new PoiCitySearchOption() .city("北京") //必填 .keyword("美食") //必填 .pageNum(10));

1
2
3
4
5
6
7
8
9
10

/**
*  PoiCiySearchOption 设置检索属性
*  city 检索城市
*  keyword 检索内容关键字
*  pageNum 分页页码
*/
mPoiSearch.searchInCity(new PoiCitySearchOption()
        .city("北京") //必填
        .keyword("美食") //必填
        .pageNum(10));

在我的源码中，使用的是周边检索，应用的接口应该是：

/** * 以天安门为中心，搜索半径100米以内的餐厅 */ mPoiSearch.searchNearby(new PoiNearbySearchOption() .location(new LatLng(39.915446, 116.403869)) .radius(100); //支持多个关键字并集检索，不同关键字间以$符号分隔，最多支持10个关键字检索。如:”银行$酒店” .keyword("餐厅") .pageNum(10));

1
2
3
4
5
6
7
8
9

/**
* 以天安门为中心，搜索半径100米以内的餐厅
*/
mPoiSearch.searchNearby(new PoiNearbySearchOption()
        .location(new LatLng(39.915446, 116.403869))
        .radius(100);
        //支持多个关键字并集检索，不同关键字间以$符号分隔，最多支持10个关键字检索。如:”银行$酒店”
        .keyword("餐厅")
        .pageNum(10));

释放检索实例

重要的声明周期管理：

mPoiSearch.destroy();

1

mPoiSearch.destroy();

百度地图的简单应用——距离计算

两点距离计算
根据用户指定的两个坐标点，计算这两个点之间的直线实际地理距离。
返回值类型：double
返回值单位：米
核心代码如下：

//计算p1、p2两点之间的直线距离，单位：米 DistanceUtil.getDistance(p1, p2);

1
2
3

//计算p1、p2两点之间的直线距离，单位：米

DistanceUtil.getDistance(p1, p2);

其中p1和p2都是LatLng的对象

百度地图的简单应用——调起百度地图

由于不可能设计的APP面向的需求是寻找附近的一个可供娱乐的地方，所以导航的功能可以直接使用现成的百度地图来提供

我们使用的是步行导航：

//定义起终点坐标（天安门和百度大厦） LatLng startPoint = new LatLng(39.915291, 116.403857); LatLng endPoint = new LatLng(40.056858, 116.308194); //构建导航参数 NaviParaOption para = new NaviParaOption() .startPoint(startPoint) .endPoint(endPoint) .startName("天安门") .endName("百度大厦"); //调起百度地图 try { BaiduMapNavigation.openBaiduMapWalkNavi(para, this); } catch (BaiduMapAppNotSupportNaviException e) { e.printStackTrace(); //调起失败的处理 } //调起结束时及时调用finish方法以释放相关资源 BaiduMapNavigation.finish(this);

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

//定义起终点坐标（天安门和百度大厦）
LatLng startPoint = new LatLng(39.915291, 116.403857);
LatLng endPoint = new LatLng(40.056858, 116.308194);

//构建导航参数
NaviParaOption para = new NaviParaOption()
     .startPoint(startPoint)
     .endPoint(endPoint)
     .startName("天安门")
     .endName("百度大厦");
//调起百度地图
try {
BaiduMapNavigation.openBaiduMapWalkNavi(para, this);
} catch (BaiduMapAppNotSupportNaviException e) {
e.printStackTrace();
//调起失败的处理
}

//调起结束时及时调用finish方法以释放相关资源
BaiduMapNavigation.finish(this);

以上的代码即可完全地调起百度地图并直接进行步行导航

综合教程——摇一摇地图

制作百度地图的API的综合运用——显示定位、POI检索、距离计算、调起百度地图

关键代码：
权限：

  <uses-permission android:name="android.permission.INTERNET" />  <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />  <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />  <uses-permission android:name="android.permission.VIBRATE" /> <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />   <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />  <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" /> ...  <service android:name="com.baidu.location.f" android:enabled="true" android:process=":remote"/>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18



<uses-permission android:name="android.permission.INTERNET" /> 
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" /> 
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" /> 
<uses-permission android:name="android.permission.VIBRATE" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />



<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />

<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
...

     <service android:name="com.baidu.location.f"
         android:enabled="true"
         android:process=":remote"/>

显示定位:

// ----------------------------------- 初始化百度地图 --------------------------------- // mMapView = findViewById(R.id.bmapView); mTextView = findViewById(R.id.tv); mPoiSearch = PoiSearch.newInstance(); mPoiSearch.setOnGetPoiSearchResultListener(this); // 更改地图类型 mBaiduMap = mMapView.getMap(); mBaiduMap.setMapType(BaiduMap.MAP_TYPE_SATELLITE); // 设置定位服务开始 mBaiduMap.setMyLocationEnabled(true); //定位初始化 mLocationClient = new LocationClient(getApplicationContext()); //通过LocationClientOption设置LocationClient相关参数 LocationClientOption option = new LocationClientOption(); option.setLocationMode(LocationClientOption.LocationMode.Device_Sensors); // 定位模式是仅限设备模式，也就是仅允许GPS来定位。 option.setOpenGps(true); // 打开gps option.setCoorType("bd09ll"); // 设置坐标类型 option.setScanSpan(1000); //设置打开自动回调位置模式，该开关打开后，期间只要定位SDK检测到位置变化就会主动回调给开发者 option.setIsNeedAddress(true); //可选，是否需要地址信息，默认为不需要，即参数为false //如果开发者需要获得当前点的地址信息，此处必须为true option.setNeedNewVersionRgc(true); //可选，设置是否需要最新版本的地址信息。默认需要，即参数为true //设置locationClientOption mLocationClient.setLocOption(option); //注册LocationListener监听器 MyLocationListener myLocationListener = new MyLocationListener(); mLocationClient.registerLocationListener(myLocationListener); //开启地图定位图层 mLocationClient.start(); // 搜索时不重复,使用HashSet来支持 mHashLocStr = new HashSet<>(); // 一开始搜索的半径和接收的结果数 mRadius = 1000; mPageCapacity = 10; // ----------------------------------------------------------------------------------- //

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49

// ----------------------------------- 初始化百度地图 --------------------------------- //

     mMapView = findViewById(R.id.bmapView);
     mTextView = findViewById(R.id.tv);

     mPoiSearch = PoiSearch.newInstance();
     mPoiSearch.setOnGetPoiSearchResultListener(this);

     // 更改地图类型
     mBaiduMap = mMapView.getMap();
     mBaiduMap.setMapType(BaiduMap.MAP_TYPE_SATELLITE);

     // 设置定位服务开始
     mBaiduMap.setMyLocationEnabled(true);

     //定位初始化
     mLocationClient = new LocationClient(getApplicationContext());

     //通过LocationClientOption设置LocationClient相关参数
     LocationClientOption option = new LocationClientOption();
     option.setLocationMode(LocationClientOption.LocationMode.Device_Sensors);  // 定位模式是仅限设备模式，也就是仅允许GPS来定位。
     option.setOpenGps(true); // 打开gps
     option.setCoorType("bd09ll"); // 设置坐标类型
     option.setScanSpan(1000);
     //设置打开自动回调位置模式，该开关打开后，期间只要定位SDK检测到位置变化就会主动回调给开发者

     option.setIsNeedAddress(true);
     //可选，是否需要地址信息，默认为不需要，即参数为false
     //如果开发者需要获得当前点的地址信息，此处必须为true
     option.setNeedNewVersionRgc(true);
     //可选，设置是否需要最新版本的地址信息。默认需要，即参数为true
     //设置locationClientOption
     mLocationClient.setLocOption(option);

     //注册LocationListener监听器
     MyLocationListener myLocationListener = new MyLocationListener();
     mLocationClient.registerLocationListener(myLocationListener);

     //开启地图定位图层
     mLocationClient.start();

     // 搜索时不重复,使用HashSet来支持
     mHashLocStr = new HashSet<>();

     // 一开始搜索的半径和接收的结果数
     mRadius = 1000;
     mPageCapacity = 10;

     // ----------------------------------------------------------------------------------- //

POI检索：

// 搜索附近的娱乐设施 private void searchPoiNearBy() { String cityStr = mCity; // 获取检索关键字 String keyWordStr = "娱乐"; if (TextUtils.isEmpty(cityStr) || TextUtils.isEmpty(keyWordStr)) { return; } LatLng ll = new LatLng(mBDLocation.getLatitude(), mBDLocation.getLongitude()); // 搜索附近的娱乐场所 mPoiSearch.searchNearby((new PoiNearbySearchOption()) .location(ll) .keyword(keyWordStr) .pageCapacity(mPageCapacity) .pageNum(0) .radius(mRadius)); }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

// 搜索附近的娱乐设施
private void searchPoiNearBy() {
     String cityStr = mCity;
     // 获取检索关键字
     String keyWordStr = "娱乐";
     if (TextUtils.isEmpty(cityStr) || TextUtils.isEmpty(keyWordStr)) {
         return;
     }

     LatLng ll = new LatLng(mBDLocation.getLatitude(), mBDLocation.getLongitude());

     // 搜索附近的娱乐场所
     mPoiSearch.searchNearby((new PoiNearbySearchOption())
             .location(ll)
             .keyword(keyWordStr)
             .pageCapacity(mPageCapacity)
             .pageNum(0)
             .radius(mRadius));
}

调起百度地图：

@Override public void onBindViewHolder(@NonNull AddressHolder holder, int position) { //定义起终点坐标 LatLng startPoint = new LatLng(startLocation.getLatitude(), startLocation.getLongitude()); LatLng endPoint = list.get(position).getLocation(); int distance = (int)DistanceUtil.getDistance(startPoint, endPoint); String locStr = list.get(position).getName() + ", 距离自己：" + distance + " m"; holder.textView.setText(locStr); holder.textView.setOnClickListener(v -> { Toast.makeText(mContext, "点我就跳转到别的APP咯", Toast.LENGTH_SHORT).show(); //构建导航参数 NaviParaOption para = new NaviParaOption() .startPoint(startPoint) .endPoint(endPoint) .startName("我的位置") .endName(list.get(position).getName()); //调起百度地图 try { BaiduMapNavigation.openBaiduMapWalkNavi(para, mContext); } catch (BaiduMapAppNotSupportNaviException e) { e.printStackTrace(); //调起失败的处理 } //调起结束时及时调用finish方法以释放相关资源 BaiduMapNavigation.finish(mContext); }); }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

@Override
public void onBindViewHolder(@NonNull AddressHolder holder, int position) {
     //定义起终点坐标
     LatLng startPoint = new LatLng(startLocation.getLatitude(), startLocation.getLongitude());
     LatLng endPoint = list.get(position).getLocation();
     int distance = (int)DistanceUtil.getDistance(startPoint, endPoint);
     String locStr = list.get(position).getName() + ", 距离自己：" + distance + " m";
     holder.textView.setText(locStr);
     holder.textView.setOnClickListener(v -> {
         Toast.makeText(mContext, "点我就跳转到别的APP咯", Toast.LENGTH_SHORT).show();

         //构建导航参数
         NaviParaOption para = new NaviParaOption()
                 .startPoint(startPoint)
                 .endPoint(endPoint)
                 .startName("我的位置")
                 .endName(list.get(position).getName());
         //调起百度地图
         try {
             BaiduMapNavigation.openBaiduMapWalkNavi(para, mContext);
         } catch (BaiduMapAppNotSupportNaviException e) {
             e.printStackTrace();
             //调起失败的处理
         }

         //调起结束时及时调用finish方法以释放相关资源
         BaiduMapNavigation.finish(mContext);
     });
}

制作摇一摇

初始化

// ---------------------------------初始化摇一摇--------------------------------------- // mHandler = new MyHandler(this); //初始化SoundPool mSoundPool = new SoundPool(1, AudioManager.STREAM_SYSTEM, 5); mWeiChatAudio = mSoundPool.load(this, R.raw.weichat_audio, 1); //获取Vibrator震动服务 mVibrator = (Vibrator) getSystemService(VIBRATOR_SERVICE); // 摇一摇的两个分离界面 mTopLayout = findViewById(R.id.top_layout); mBottomLayout = findViewById(R.id.bottom_layout); //获取 SensorManager 负责管理传感器 mSensorManager = ((SensorManager) getSystemService(SENSOR_SERVICE)); if (mSensorManager != null) { //获取加速度传感器 mAccelerometerSensor = mSensorManager.getDefaultSensor(Sensor.TYPE_ACCELEROMETER); if (mAccelerometerSensor != null) { mSensorManager.registerListener(this, mAccelerometerSensor, SensorManager.SENSOR_DELAY_UI); } } // ----------------------------------------------------------------------------------- //

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

// ---------------------------------初始化摇一摇--------------------------------------- //

mHandler = new MyHandler(this);

//初始化SoundPool
mSoundPool = new SoundPool(1, AudioManager.STREAM_SYSTEM, 5);
mWeiChatAudio = mSoundPool.load(this, R.raw.weichat_audio, 1);
//获取Vibrator震动服务
mVibrator = (Vibrator) getSystemService(VIBRATOR_SERVICE);

// 摇一摇的两个分离界面
mTopLayout = findViewById(R.id.top_layout);
mBottomLayout = findViewById(R.id.bottom_layout);

//获取 SensorManager 负责管理传感器
mSensorManager = ((SensorManager) getSystemService(SENSOR_SERVICE));
if (mSensorManager != null) {
//获取加速度传感器
mAccelerometerSensor = mSensorManager.getDefaultSensor(Sensor.TYPE_ACCELEROMETER);
if (mAccelerometerSensor != null) {
     mSensorManager.registerListener(this, mAccelerometerSensor, SensorManager.SENSOR_DELAY_UI);
}
}

// ----------------------------------------------------------------------------------- //

监听Handler：

/** * handler 接收摇一摇产生的信息并作出对应的操作 * START_SHAKE 开始摇晃 * AGAIN_SHAKE 没结束摇晃之前再次摇晃 * END_SHAKE 结束摇晃 */ private static class MyHandler extends Handler { private WeakReference<MainActivity> mReference; private MainActivity mActivity; public MyHandler(MainActivity activity) { mReference = new WeakReference<MainActivity>(activity); if (mReference != null) { mActivity = mReference.get(); } } @Override public void handleMessage(Message msg) { super.handleMessage(msg); switch (msg.what) { case START_SHAKE: //This method requires the caller to hold the permission VIBRATE. mActivity.mVibrator.vibrate(300); //发出提示音 mActivity.mSoundPool.play(mActivity.mWeiChatAudio, 1, 1, 0, 0, 1); mActivity.startAnimation(false);//参数含义: (不是回来) 也就是说两张图片分散开的动画 break; case AGAIN_SHAKE: mActivity.mVibrator.vibrate(300); break; case END_SHAKE: //整体效果结束, 将震动设置为false mActivity.isShake = false; // 展示上下两种图片回来的效果 mActivity.startAnimation(true); break; } } }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

/**
     * handler 接收摇一摇产生的信息并作出对应的操作
     * START_SHAKE 开始摇晃
     * AGAIN_SHAKE 没结束摇晃之前再次摇晃
     * END_SHAKE 结束摇晃
     */
    private static class MyHandler extends Handler {
        private WeakReference<MainActivity> mReference;
        private MainActivity mActivity;

        public MyHandler(MainActivity activity) {
            mReference = new WeakReference<MainActivity>(activity);
            if (mReference != null) {
                mActivity = mReference.get();
            }
        }

        @Override
        public void handleMessage(Message msg) {
            super.handleMessage(msg);
            switch (msg.what) {
                case START_SHAKE:
                    //This method requires the caller to hold the permission VIBRATE.
                    mActivity.mVibrator.vibrate(300);
                    //发出提示音
                    mActivity.mSoundPool.play(mActivity.mWeiChatAudio, 1, 1, 0, 0, 1);

                    mActivity.startAnimation(false);//参数含义: (不是回来) 也就是说两张图片分散开的动画
                    break;
                case AGAIN_SHAKE:
                    mActivity.mVibrator.vibrate(300);
                    break;
                case END_SHAKE:
                    //整体效果结束, 将震动设置为false
                    mActivity.isShake = false;
                    // 展示上下两种图片回来的效果
                    mActivity.startAnimation(true);
                    break;
            }
        }
    }

编写监听函数：

/////////////////////////////////////////////////////////////////////////// // SensorEventListener回调方法 /////////////////////////////////////////////////////////////////////////// @Override public void onSensorChanged(SensorEvent event) { int type = event.sensor.getType(); if (type == Sensor.TYPE_ACCELEROMETER) { //获取三个方向值 float[] values = event.values; float x = values[0]; float y = values[1]; float z = values[2]; if ((Math.abs(x) > 17 || Math.abs(y) > 17 || Math .abs(z) > 17) && !isShake) { isShake = true; Thread thread = new Thread() { @Override public void run() { super.run(); try { Log.d(TAG, "onSensorChanged: 摇动"); searchPoiNearBy(); //开始震动发出提示音展示动画效果 mHandler.obtainMessage(START_SHAKE).sendToTarget(); Thread.sleep(500); //再来一次震动提示 mHandler.obtainMessage(AGAIN_SHAKE).sendToTarget(); Thread.sleep(500); mHandler.obtainMessage(END_SHAKE).sendToTarget(); } catch (InterruptedException e) { e.printStackTrace(); } } }; thread.start(); } } }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

///////////////////////////////////////////////////////////////////////////
    // SensorEventListener回调方法
    ///////////////////////////////////////////////////////////////////////////
    @Override
    public void onSensorChanged(SensorEvent event) {
        int type = event.sensor.getType();

        if (type == Sensor.TYPE_ACCELEROMETER) {
            //获取三个方向值
            float[] values = event.values;
            float x = values[0];
            float y = values[1];
            float z = values[2];

            if ((Math.abs(x) > 17 || Math.abs(y) > 17 || Math
                    .abs(z) > 17) && !isShake) {
                isShake = true;
                Thread thread = new Thread() {
                    @Override
                    public void run() {

                        super.run();
                        try {
                            Log.d(TAG, "onSensorChanged: 摇动");
                            searchPoiNearBy();
                            //开始震动发出提示音展示动画效果
                            mHandler.obtainMessage(START_SHAKE).sendToTarget();
                            Thread.sleep(500);
                            //再来一次震动提示
                            mHandler.obtainMessage(AGAIN_SHAKE).sendToTarget();
                            Thread.sleep(500);
                            mHandler.obtainMessage(END_SHAKE).sendToTarget();

                        } catch (InterruptedException e) {
                            e.printStackTrace();
                        }
                    }
                };
                thread.start();
            }
        }
    }

编写动画：

/** * 开启摇一摇动画 * * @param isBack 是否是返回初识状态 */ private void startAnimation(boolean isBack) { //动画坐标移动的位置的类型是相对自己的 int type = Animation.RELATIVE_TO_PARENT; float topFromY; float topToY; float bottomFromY; float bottomToY; if (!isBack) { topFromY = -0.5f; topToY = 0; bottomFromY = 0.6f; bottomToY = 0; } else { topFromY = 0; topToY = -0.5f; bottomFromY = 0; bottomToY = 0.6f; } //上面图片的动画效果 TranslateAnimation topAnim = new TranslateAnimation( type, 0, type, 0, type, topFromY, type, topToY ); topAnim.setDuration(200); //动画终止时停留在最后一帧~不然会回到没有执行之前的状态 topAnim.setFillAfter(true); //底部的动画效果 TranslateAnimation bottomAnim = new TranslateAnimation( type, 0, type, 0, type, bottomFromY, type, bottomToY ); bottomAnim.setDuration(200); bottomAnim.setFillAfter(true); //大家一定不要忘记, 当要回来时, 我们中间的两根线需要GONE掉 if (isBack) { bottomAnim.setAnimationListener(new Animation.AnimationListener() { @Override public void onAnimationStart(Animation animation) {} @Override public void onAnimationRepeat(Animation animation) {} @Override public void onAnimationEnd(Animation animation) { } }); } //设置动画 mTopLayout.startAnimation(topAnim); mBottomLayout.startAnimation(bottomAnim); }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58

/**
     * 开启摇一摇动画
     *
     * @param isBack 是否是返回初识状态
     */
    private void startAnimation(boolean isBack) {
        //动画坐标移动的位置的类型是相对自己的
        int type = Animation.RELATIVE_TO_PARENT;

        float topFromY;
        float topToY;
        float bottomFromY;
        float bottomToY;
        if (!isBack) {
            topFromY = -0.5f;
            topToY = 0;
            bottomFromY = 0.6f;
            bottomToY = 0;
        } else {
            topFromY = 0;
            topToY = -0.5f;
            bottomFromY = 0;
            bottomToY = 0.6f;
        }

        //上面图片的动画效果
        TranslateAnimation topAnim = new TranslateAnimation(
                type, 0, type, 0, type, topFromY, type, topToY
        );
        topAnim.setDuration(200);
        //动画终止时停留在最后一帧~不然会回到没有执行之前的状态
        topAnim.setFillAfter(true);

        //底部的动画效果
        TranslateAnimation bottomAnim = new TranslateAnimation(
                type, 0, type, 0, type, bottomFromY, type, bottomToY
        );
        bottomAnim.setDuration(200);
        bottomAnim.setFillAfter(true);

        //大家一定不要忘记, 当要回来时, 我们中间的两根线需要GONE掉
        if (isBack) {
            bottomAnim.setAnimationListener(new Animation.AnimationListener() {
                @Override
                public void onAnimationStart(Animation animation) {}
                @Override
                public void onAnimationRepeat(Animation animation) {}
                @Override
                public void onAnimationEnd(Animation animation) {

                }
            });
        }
        //设置动画
        mTopLayout.startAnimation(topAnim);
        mBottomLayout.startAnimation(bottomAnim);

    }

使用摇一摇调用POI检索，使用recyclerView调起百度地图

摇一摇中onSensorChanged函数中在开始摇晃时加入POI检索函数：searchPoiNearBy；
recyclerView的每个holder加入调起百度地图的监听器；

参考链接

中级实训Android学习记录——Poi检索、距离计算、调起百度地图

Flutter 倒计时功能

import 'dart:async';

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        title: 'Flutter Demo',
        theme: ThemeData(
          primarySwatch: Colors.blue,
        ),
        home: Scaffold(
          appBar: AppBar(
            title: const Text('倒计时'),
          ),
          body: const MyHomePage(),
        ));
  }
}

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

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  late Duration time;
  var seconds = 0;
  Timer? countdownTimer;

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Column(
        children: <Widget>[
          ElevatedButton(
            child: const Text('定时'),
            onPressed: () {
              showCupertinoModalPopup<void>(
                context: context,
                builder: (BuildContext context) {
                  return Container(
                      height: 200,
                      color: CupertinoColors.white,
                      child: DefaultTextStyle(
                        style: const TextStyle(
                          color: CupertinoColors.black,
                          fontSize: 22.0,
                        ),
                        child: CupertinoTimerPicker(
                          //initialTimerDuration: time,
                          //minuteInterval: 5,
                          mode: CupertinoTimerPickerMode.ms,
                          onTimerDurationChanged: (Duration newTimer) {
                            setState(() {
                              time = newTimer;
                              seconds = time.inSeconds;
                              // flag = true;
                            });
                          },
                        ),
                      ));
                },
              );
            },
          ),
          ElevatedButton(
            child: const Text('开始倒计时'),
            onPressed: () {
              if (countdownTimer != null) {
                return;
              }
              countdownTimer =
                  Timer.periodic(const Duration(seconds: 1), (timer) {
                setState(() {
                  if (seconds > 0) {
                    seconds--;
                  } else {
                    countdownTimer?.cancel();
                    countdownTimer = null;
                  }
                });
              });
            },
          ),
          Text(
            '倒计时： $seconds 秒',
            style: const TextStyle(fontSize: 30),
          ),
        ],
      ),
    );
  }

  @override
  void dispose() {
    countdownTimer?.cancel();
    countdownTimer = null;
    super.dispose();
  }
}

100

101

102

103

104

105

106

107

108

109

110

import 'dart:async';

import 'package:flutter/cupertino.dart';

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {

const MyApp({Key? key}) : super(key: key);

// This widget is the root of your application.

@override

Widget build(BuildContext context) {

return MaterialApp(

title: 'Flutter Demo',

theme: ThemeData(

primarySwatch: Colors.blue,

home: Scaffold(

appBar: AppBar(

title: const Text('倒计时'),

body: const MyHomePage(),

));

}

class MyHomePage extends StatefulWidget {

const MyHomePage({Key? key}) : super(key: key);

@override

State<MyHomePage> createState() => _MyHomePageState();

}

class _MyHomePageState extends State<MyHomePage> {

late Duration time;

var seconds = 0;

Timer? countdownTimer;

@override

Widget build(BuildContext context) {

return Center(

child: Column(

children: <Widget>[

ElevatedButton(

child: const Text('定时'),

onPressed: () {

showCupertinoModalPopup<void>(

context: context,

builder: (BuildContext context) {

return Container(

height: 200,

color: CupertinoColors.white,

child: DefaultTextStyle(

style: const TextStyle(

color: CupertinoColors.black,

fontSize: 22.0,

child: CupertinoTimerPicker(

//initialTimerDuration: time,

//minuteInterval: 5,

mode: CupertinoTimerPickerMode.ms,

onTimerDurationChanged: (Duration newTimer) {

setState(() {

time = newTimer;

seconds = time.inSeconds;

// flag = true;

});

));

);

ElevatedButton(

child: const Text('开始倒计时'),

onPressed: () {

if (countdownTimer != null) {

return;

}

countdownTimer =

Timer.periodic(const Duration(seconds: 1), (timer) {

setState(() {

if (seconds > 0) {

seconds--;

} else {

countdownTimer?.cancel();

countdownTimer = null;

}

});

Text(

'倒计时： $seconds 秒',

style: const TextStyle(fontSize: 30),

);

}

@override

void dispose() {

countdownTimer?.cancel();

countdownTimer = null;

super.dispose();

}

参考链接

Flutter : LateInitializationError: Field ‘data’ has not been initialized

You don’t want a late variable, you want a nullable one. If you need to check if something is initialized, you should be using a nullable variable instead and your code is already set up to check for null

just change

late MyData data;

1	late MyData data;

MyData? data;

1	MyData? data;

E.g.

change to

参考链接

Flutter : LateInitializationError: Field ‘data’ has not been initialized, got error

Flutter画圆/虚线圆/渐变圆/进度圆

同一颜色的圆

例子样式:

废话不多说直接上代码,注释清楚!

1.调用该方法如果只要一个圆，赋值completeColor, completeWidth, completePercent就可以，剩下的不用赋值就是一个圆
2.如果需要俩圆的话直接调用赋值就行
3.如果只需要一个虚线圆的话，赋值isDividerRound = true; ,lineColor, width, 剩下的不用写,completeWidth 不得大于0
这是一个全圆就是比例是百分之百的圆,可以自行修改

/*
 * 如果只有一个圆的情况下,请设置已完成的圆  默认的圆的颜色不要设置
 */
import 'dart:math';

import 'package:flutter/cupertino.dart';

class MyPainter extends CustomPainter {
  //默认的线的背景颜色
  Color? lineColor;
  //默认的线的宽度
  double width;
  //已完成线的颜色
  Color completeColor;
  //已完成的百分比
  double completePercent;
  //已完成的线的宽度
  double completeWidth;
  // 从哪开始 1从下开始, 2 从上开始 3 从左开始 4 从右开始  默认从下开始
  double startType;
  //是不是虚线的圈
  bool isDividerRound;
  //中间的实圆 统计线条是不是渐变的圆
  bool isGradient;
  //结束的位置
  double endAngle;
  //默认的线的背景颜色
  List<Color> lineColors;
  //实心圆阴影颜色
  // Color shadowColor;
  //渐变圆  深色在下面 还是在左面  默认在下面
  bool isTransform;

  MyPainter({
    required this.lineColor,
    required this.completeColor,
    required this.completePercent,
    required this.width,
    required this.completeWidth,
    this.startType = 1,
    this.isDividerRound = false,
    this.isGradient = false,
    this.endAngle = pi * 2,
    required this.lineColors,
    this.isTransform = false,
    // this.shadowColor,
  });

  @override
  void paint(Canvas canvas, Size size) {
    Offset center = Offset(size.width / 2, size.height / 2); //  坐标中心
    double radius = min(size.width / 2, size.height / 2); //  半径

    //是否有第二层圆
    if (lineColor != null) {
      //是不是 虚线圆
      if (isDividerRound) {
        //背景的线
        Paint line = Paint()
          ..color = lineColor!
        // ..strokeCap = StrokeCap.round
          ..style = PaintingStyle.stroke
          ..isAntiAlias = true //抗锯齿
          ..strokeWidth = width;

        double i = 0.00;
        while (i < pi * 2) {
          canvas.drawArc(Rect.fromCircle(center: center, radius: radius), i,
              0.04, false, line);
          i = i + 0.08;
        }
      } else {
        //背景的线  实线
        Paint line = Paint()
          ..color = lineColor!
          ..strokeCap = StrokeCap.round
          ..style = PaintingStyle.stroke
          ..strokeWidth = width;

        canvas.drawCircle(
          //  画圆方法
            center,
            radius,
            line);
      }
    }
    //画上面的圆
    if (completeWidth > 0) {
      double arcAngle = 2 * pi * (completePercent / 100);

      // 从哪开始 1从下开始, 2 从上开始 3 从左开始 4 从右开始  默认从下开始
      double start = pi / 2;
      if (startType == 2) {
        start = -pi / 2;
      } else if (startType == 3) {
        start = pi;
      } else if (startType == 4) {
        start = pi * 2;
      }

      //创建画笔
      Paint paint = Paint()
        ..strokeCap = StrokeCap.round
        ..style = PaintingStyle.stroke
        ..strokeWidth = completeWidth;

      ///是渐变圆
      if (isGradient == true) {
        //渐变圆 深色位置偏移量  默认深色在下面
        double transform;
        if (isTransform == false) {
          //深色在下面
          transform = -pi / 2;
        } else {
          //深色在左面
          transform = pi * 2;
        }
        paint.shader = SweepGradient(
          startAngle: 0.0,
          endAngle: pi * 2,
          colors: lineColors,
          tileMode: TileMode.clamp,
          transform: GradientRotation(transform),
        ).createShader(
          Rect.fromCircle(center: center, radius: radius),
        );

        canvas.drawArc(Rect.fromCircle(center: center, radius: radius), start,
            arcAngle, false, paint);
      } else {
        ///是实体圆
        paint.color = completeColor;
        canvas.drawArc(
          Rect.fromCircle(center: center, radius: radius),
          start, //  -pi / 2,从正上方开始  pi / 2,从下方开始
          arcAngle,
          false,
          paint,
        );
      }
    }
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) => false;
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

* 如果只有一个圆的情况下,请设置已完成的圆默认的圆的颜色不要设置

import 'dart:math';

import 'package:flutter/cupertino.dart';

class MyPainter extends CustomPainter {

//默认的线的背景颜色

Color? lineColor;

//默认的线的宽度

double width;

//已完成线的颜色

Color completeColor;

//已完成的百分比

double completePercent;

//已完成的线的宽度

double completeWidth;

// 从哪开始 1从下开始, 2 从上开始 3 从左开始 4 从右开始默认从下开始

double startType;

//是不是虚线的圈

bool isDividerRound;

//中间的实圆统计线条是不是渐变的圆

bool isGradient;

//结束的位置

double endAngle;

//默认的线的背景颜色

List<Color> lineColors;

//实心圆阴影颜色

// Color shadowColor;

//渐变圆深色在下面还是在左面默认在下面

bool isTransform;

MyPainter({

required this.lineColor,

required this.completeColor,

required this.completePercent,

required this.width,

required this.completeWidth,

this.startType = 1,

this.isDividerRound = false,

this.isGradient = false,

this.endAngle = pi * 2,

required this.lineColors,

this.isTransform = false,

// this.shadowColor,

});

@override

void paint(Canvas canvas, Size size) {

Offset center = Offset(size.width / 2, size.height / 2); // 坐标中心

double radius = min(size.width / 2, size.height / 2); // 半径

//是否有第二层圆

if (lineColor != null) {

//是不是虚线圆

if (isDividerRound) {

//背景的线

Paint line = Paint()

..color = lineColor!

// ..strokeCap = StrokeCap.round

..style = PaintingStyle.stroke

..isAntiAlias = true //抗锯齿

..strokeWidth = width;

double i = 0.00;

while (i < pi * 2) {

canvas.drawArc(Rect.fromCircle(center: center, radius: radius), i,

0.04, false, line);

i = i + 0.08;

}

} else {

//背景的线实线

Paint line = Paint()

..color = lineColor!

..strokeCap = StrokeCap.round

..style = PaintingStyle.stroke

..strokeWidth = width;

canvas.drawCircle(

// 画圆方法

center,

radius,

line);

}

//画上面的圆

if (completeWidth > 0) {

double arcAngle = 2 * pi * (completePercent / 100);

// 从哪开始 1从下开始, 2 从上开始 3 从左开始 4 从右开始默认从下开始

double start = pi / 2;

if (startType == 2) {

start = -pi / 2;

} else if (startType == 3) {

start = pi;

} else if (startType == 4) {

start = pi * 2;

}

//创建画笔

Paint paint = Paint()

..strokeCap = StrokeCap.round

..style = PaintingStyle.stroke

..strokeWidth = completeWidth;

///是渐变圆

if (isGradient == true) {

//渐变圆深色位置偏移量默认深色在下面

double transform;

if (isTransform == false) {

//深色在下面

transform = -pi / 2;

} else {

//深色在左面

transform = pi * 2;

}

paint.shader = SweepGradient(

startAngle: 0.0,

endAngle: pi * 2,

colors: lineColors,

tileMode: TileMode.clamp,

transform: GradientRotation(transform),

).createShader(

Rect.fromCircle(center: center, radius: radius),

);

canvas.drawArc(Rect.fromCircle(center: center, radius: radius), start,

arcAngle, false, paint);

} else {

///是实体圆

paint.color = completeColor;

canvas.drawArc(

Rect.fromCircle(center: center, radius: radius),

start, // -pi / 2,从正上方开始 pi / 2,从下方开始

arcAngle,

false,

paint,

);

}

@override

bool shouldRepaint(CustomPainter oldDelegate) => false;

}

实践示例

我们用 Flutter 新建项目的例子代码来演示，如下：

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        // This is the theme of your application.
        //
        // Try running your application with "flutter run". You'll see the
        // application has a blue toolbar. Then, without quitting the app, try
        // changing the primarySwatch below to Colors.green and then invoke
        // "hot reload" (press "r" in the console where you ran "flutter run",
        // or simply save your changes to "hot reload" in a Flutter IDE).
        // Notice that the counter didn't reset back to zero; the application
        // is not restarted.
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);

  // This widget is the home page of your application. It is stateful, meaning
  // that it has a State object (defined below) that contains fields that affect
  // how it looks.

  // This class is the configuration for the state. It holds the values (in this
  // case the title) provided by the parent (in this case the App widget) and
  // used by the build method of the State. Fields in a Widget subclass are
  // always marked "final".

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      // This call to setState tells the Flutter framework that something has
      // changed in this State, which causes it to rerun the build method below
      // so that the display can reflect the updated values. If we changed
      // _counter without calling setState(), then the build method would not be
      // called again, and so nothing would appear to happen.
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    // This method is rerun every time setState is called, for instance as done
    // by the _incrementCounter method above.
    //
    // The Flutter framework has been optimized to make rerunning build methods
    // fast, so that you can just rebuild anything that needs updating rather
    // than having to individually change instances of widgets.
    return Scaffold(
      appBar: AppBar(
        // Here we take the value from the MyHomePage object that was created by
        // the App.build method, and use it to set our appbar title.
        title: Text(widget.title),
      ),
      body: Center(
        // Center is a layout widget. It takes a single child and positions it
        // in the middle of the parent.
        child: Column(
          // Column is also a layout widget. It takes a list of children and
          // arranges them vertically. By default, it sizes itself to fit its
          // children horizontally, and tries to be as tall as its parent.
          //
          // Invoke "debug painting" (press "p" in the console, choose the
          // "Toggle Debug Paint" action from the Flutter Inspector in Android
          // Studio, or the "Toggle Debug Paint" command in Visual Studio Code)
          // to see the wireframe for each widget.
          //
          // Column has various properties to control how it sizes itself and
          // how it positions its children. Here we use mainAxisAlignment to
          // center the children vertically; the main axis here is the vertical
          // axis because Columns are vertical (the cross axis would be
          // horizontal).
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            const Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headline4,
            ),
            CustomPaint(
              size: const Size(200, 200),

              foregroundPainter: MyPainter(
                lineColor: const Color(0xFF000000),
                lineColors: [const Color(0xFF000000), const Color(0xFFFFFFFF)],
                completeWidth: 10,
                width: 6,
                completePercent: 90,
                completeColor: const Color(0xFFFF000F),
              ),
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ), // This trailing comma makes auto-formatting nicer for build methods.
    );
  }
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

import 'package:flutter/material.dart';

void main() {

runApp(const MyApp());

}

class MyApp extends StatelessWidget {

const MyApp({Key? key}) : super(key: key);

// This widget is the root of your application.

@override

Widget build(BuildContext context) {

return MaterialApp(

title: 'Flutter Demo',

theme: ThemeData(

// This is the theme of your application.

// Try running your application with "flutter run". You'll see the

// application has a blue toolbar. Then, without quitting the app, try

// changing the primarySwatch below to Colors.green and then invoke

// "hot reload" (press "r" in the console where you ran "flutter run",

// or simply save your changes to "hot reload" in a Flutter IDE).

// Notice that the counter didn't reset back to zero; the application

// is not restarted.

primarySwatch: Colors.blue,

home: const MyHomePage(title: 'Flutter Demo Home Page'),

);

}

class MyHomePage extends StatefulWidget {

const MyHomePage({Key? key, required this.title}) : super(key: key);

// This widget is the home page of your application. It is stateful, meaning

// that it has a State object (defined below) that contains fields that affect

// how it looks.

// This class is the configuration for the state. It holds the values (in this

// case the title) provided by the parent (in this case the App widget) and

// used by the build method of the State. Fields in a Widget subclass are

// always marked "final".

final String title;

@override

State<MyHomePage> createState() => _MyHomePageState();

}

class _MyHomePageState extends State<MyHomePage> {

int _counter = 0;

void _incrementCounter() {

setState(() {

// This call to setState tells the Flutter framework that something has

// changed in this State, which causes it to rerun the build method below

// so that the display can reflect the updated values. If we changed

// _counter without calling setState(), then the build method would not be

// called again, and so nothing would appear to happen.

_counter++;

});

}

@override

Widget build(BuildContext context) {

// This method is rerun every time setState is called, for instance as done

// by the _incrementCounter method above.

// The Flutter framework has been optimized to make rerunning build methods

// fast, so that you can just rebuild anything that needs updating rather

// than having to individually change instances of widgets.

return Scaffold(

appBar: AppBar(

// Here we take the value from the MyHomePage object that was created by

// the App.build method, and use it to set our appbar title.

title: Text(widget.title),

body: Center(

// Center is a layout widget. It takes a single child and positions it

// in the middle of the parent.

child: Column(

// Column is also a layout widget. It takes a list of children and

// arranges them vertically. By default, it sizes itself to fit its

// children horizontally, and tries to be as tall as its parent.

// Invoke "debug painting" (press "p" in the console, choose the

// "Toggle Debug Paint" action from the Flutter Inspector in Android

// Studio, or the "Toggle Debug Paint" command in Visual Studio Code)

// to see the wireframe for each widget.

// Column has various properties to control how it sizes itself and

// how it positions its children. Here we use mainAxisAlignment to

// center the children vertically; the main axis here is the vertical

// axis because Columns are vertical (the cross axis would be

// horizontal).

mainAxisAlignment: MainAxisAlignment.center,

children: <Widget>[

const Text(

'You have pushed the button this many times:',

Text(

'$_counter',

style: Theme.of(context).textTheme.headline4,

CustomPaint(

size: const Size(200, 200),

foregroundPainter: MyPainter(

lineColor: const Color(0xFF000000),

lineColors: [const Color(0xFF000000), const Color(0xFFFFFFFF)],

completeWidth: 10,

width: 6,

completePercent: 90,

completeColor: const Color(0xFFFF000F),

floatingActionButton: FloatingActionButton(

onPressed: _incrementCounter,

tooltip: 'Increment',

child: const Icon(Icons.add),

), // This trailing comma makes auto-formatting nicer for build methods.

);

}

渐变色的圆

代码看看就会了

import 'dart:math';

import 'package:flutter/cupertino.dart';

///渐变圆
class MyGradientPainter extends CustomPainter {
  //默认的线的背景颜色
  List<Color> lineColor;
  //默认的线的宽度
  double width;
  double endAngle;

  MyGradientPainter({
    required this.lineColor,
    required this.width,
    this.endAngle = pi * 2,
  });

  @override
  void paint(Canvas canvas, Size size) {
    Offset center = Offset(size.width / 2, size.height / 2); //  坐标中心
    double radius = min(size.width / 2, size.height / 2); //  半径

    var paint = Paint()
      ..strokeCap = StrokeCap.round
      ..style = PaintingStyle.stroke
      ..isAntiAlias = true //抗锯齿
      ..strokeWidth = width;

    paint.shader = SweepGradient(
      startAngle: 0.0,
      endAngle: pi * 2,
      colors: lineColor,
      transform: const GradientRotation(pi * 1.2),
    ).createShader(
      Rect.fromCircle(center: center, radius: radius),
    );

    canvas.drawArc(Rect.fromCircle(center: center, radius: radius), 0, 2 * pi,
        false, paint);
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) => false;
}

import 'dart:math';

import 'package:flutter/cupertino.dart';

///渐变圆

class MyGradientPainter extends CustomPainter {

//默认的线的背景颜色

List<Color> lineColor;

//默认的线的宽度

double width;

double endAngle;

MyGradientPainter({

required this.lineColor,

required this.width,

this.endAngle = pi * 2,

});

@override

void paint(Canvas canvas, Size size) {

Offset center = Offset(size.width / 2, size.height / 2); // 坐标中心

double radius = min(size.width / 2, size.height / 2); // 半径

var paint = Paint()

..strokeCap = StrokeCap.round

..style = PaintingStyle.stroke

..isAntiAlias = true //抗锯齿

..strokeWidth = width;

paint.shader = SweepGradient(

startAngle: 0.0,

endAngle: pi * 2,

colors: lineColor,

transform: const GradientRotation(pi * 1.2),

).createShader(

Rect.fromCircle(center: center, radius: radius),

);

canvas.drawArc(Rect.fromCircle(center: center, radius: radius), 0, 2 * pi,

false, paint);

}

@override

bool shouldRepaint(CustomPainter oldDelegate) => false;

}

实践示例

我们用 Flutter 新建项目的例子代码来演示，如下：

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        // This is the theme of your application.
        //
        // Try running your application with "flutter run". You'll see the
        // application has a blue toolbar. Then, without quitting the app, try
        // changing the primarySwatch below to Colors.green and then invoke
        // "hot reload" (press "r" in the console where you ran "flutter run",
        // or simply save your changes to "hot reload" in a Flutter IDE).
        // Notice that the counter didn't reset back to zero; the application
        // is not restarted.
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);

  // This widget is the home page of your application. It is stateful, meaning
  // that it has a State object (defined below) that contains fields that affect
  // how it looks.

  // This class is the configuration for the state. It holds the values (in this
  // case the title) provided by the parent (in this case the App widget) and
  // used by the build method of the State. Fields in a Widget subclass are
  // always marked "final".

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      // This call to setState tells the Flutter framework that something has
      // changed in this State, which causes it to rerun the build method below
      // so that the display can reflect the updated values. If we changed
      // _counter without calling setState(), then the build method would not be
      // called again, and so nothing would appear to happen.
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    // This method is rerun every time setState is called, for instance as done
    // by the _incrementCounter method above.
    //
    // The Flutter framework has been optimized to make rerunning build methods
    // fast, so that you can just rebuild anything that needs updating rather
    // than having to individually change instances of widgets.
    return Scaffold(
      appBar: AppBar(
        // Here we take the value from the MyHomePage object that was created by
        // the App.build method, and use it to set our appbar title.
        title: Text(widget.title),
      ),
      body: Center(
        // Center is a layout widget. It takes a single child and positions it
        // in the middle of the parent.
        child: Column(
          // Column is also a layout widget. It takes a list of children and
          // arranges them vertically. By default, it sizes itself to fit its
          // children horizontally, and tries to be as tall as its parent.
          //
          // Invoke "debug painting" (press "p" in the console, choose the
          // "Toggle Debug Paint" action from the Flutter Inspector in Android
          // Studio, or the "Toggle Debug Paint" command in Visual Studio Code)
          // to see the wireframe for each widget.
          //
          // Column has various properties to control how it sizes itself and
          // how it positions its children. Here we use mainAxisAlignment to
          // center the children vertically; the main axis here is the vertical
          // axis because Columns are vertical (the cross axis would be
          // horizontal).
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            const Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headline4,
            ),
            CustomPaint(
              size: const Size(200, 200),

              foregroundPainter: MyGradientPainter(
                  width: 8, lineColor: [const Color(0xFF000000),const Color(0xFFFFFFFF)]),
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ), // This trailing comma makes auto-formatting nicer for build methods.
    );
  }
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

import 'package:flutter/material.dart';

void main() {

runApp(const MyApp());

}

class MyApp extends StatelessWidget {

const MyApp({Key? key}) : super(key: key);

// This widget is the root of your application.

@override

Widget build(BuildContext context) {

return MaterialApp(

title: 'Flutter Demo',

theme: ThemeData(

// This is the theme of your application.

// Try running your application with "flutter run". You'll see the

// application has a blue toolbar. Then, without quitting the app, try

// changing the primarySwatch below to Colors.green and then invoke

// "hot reload" (press "r" in the console where you ran "flutter run",

// or simply save your changes to "hot reload" in a Flutter IDE).

// Notice that the counter didn't reset back to zero; the application

// is not restarted.

primarySwatch: Colors.blue,

home: const MyHomePage(title: 'Flutter Demo Home Page'),

);

}

class MyHomePage extends StatefulWidget {

const MyHomePage({Key? key, required this.title}) : super(key: key);

// This widget is the home page of your application. It is stateful, meaning

// that it has a State object (defined below) that contains fields that affect

// how it looks.

// This class is the configuration for the state. It holds the values (in this

// case the title) provided by the parent (in this case the App widget) and

// used by the build method of the State. Fields in a Widget subclass are

// always marked "final".

final String title;

@override

State<MyHomePage> createState() => _MyHomePageState();

}

class _MyHomePageState extends State<MyHomePage> {

int _counter = 0;

void _incrementCounter() {

setState(() {

// This call to setState tells the Flutter framework that something has

// changed in this State, which causes it to rerun the build method below

// so that the display can reflect the updated values. If we changed

// _counter without calling setState(), then the build method would not be

// called again, and so nothing would appear to happen.

_counter++;

});

}

@override

Widget build(BuildContext context) {

// This method is rerun every time setState is called, for instance as done

// by the _incrementCounter method above.

// The Flutter framework has been optimized to make rerunning build methods

// fast, so that you can just rebuild anything that needs updating rather

// than having to individually change instances of widgets.

return Scaffold(

appBar: AppBar(

// Here we take the value from the MyHomePage object that was created by

// the App.build method, and use it to set our appbar title.

title: Text(widget.title),

body: Center(

// Center is a layout widget. It takes a single child and positions it

// in the middle of the parent.

child: Column(

// Column is also a layout widget. It takes a list of children and

// arranges them vertically. By default, it sizes itself to fit its

// children horizontally, and tries to be as tall as its parent.

// Invoke "debug painting" (press "p" in the console, choose the

// "Toggle Debug Paint" action from the Flutter Inspector in Android

// Studio, or the "Toggle Debug Paint" command in Visual Studio Code)

// to see the wireframe for each widget.

// Column has various properties to control how it sizes itself and

// how it positions its children. Here we use mainAxisAlignment to

// center the children vertically; the main axis here is the vertical

// axis because Columns are vertical (the cross axis would be

// horizontal).

mainAxisAlignment: MainAxisAlignment.center,

children: <Widget>[

const Text(

'You have pushed the button this many times:',

Text(

'$_counter',

style: Theme.of(context).textTheme.headline4,

CustomPaint(

size: const Size(200, 200),

foregroundPainter: MyGradientPainter(

width: 8, lineColor: [const Color(0xFF000000),const Color(0xFFFFFFFF)]),

floatingActionButton: FloatingActionButton(

onPressed: _incrementCounter,

tooltip: 'Increment',

child: const Icon(Icons.add),

), // This trailing comma makes auto-formatting nicer for build methods.

);

}

参考链接

Flutter全屏效果实现

在切换横竖屏/全屏模式时用到 SystemChrome，它作为一个全局属性，很像 Android 的 Application，功能很强大。注意，这个SystemChrome 里面的 Chrome 实质上指的是 ChromeOS 不是 Chrome 浏览器，这些 API 最早在 ChromeOS 上实现，因此才这样命名。

setPreferredOrientations

在我们日常应用中可能会需要设置横竖屏，或锁定单方向屏幕等不同要求，通过 **setPreferredOrientations** 配合实现；简单可以按 **portraitUp 上 / portraitDown 下 / landscapeLeft 右 / landscapeRight 左** 来区分； **Tips：landscapeLeft 是以 portraitUp 顺时针旋转 90 度；landscapeRight 是以逆时针旋转 90 度，故是视觉相反。**

1	在我们日常应用中可能会需要设置横竖屏，或锁定单方向屏幕等不同要求，通过 setPreferredOrientations 配合实现；简单可以按 portraitUp 上 / portraitDown 下 / landscapeLeft 右 / landscapeRight 左来区分； Tips：landscapeLeft 是以 portraitUp 顺时针旋转 90 度；landscapeRight 是以逆时针旋转 90 度，故是视觉相反。

1. 单方向

 若需要固定应用为单一方向，仅需设置所需要的方向属性即可；

1	若需要固定应用为单一方向，仅需设置所需要的方向属性即可；

// 竖直上
SystemChrome.setPreferredOrientations([DeviceOrientation.portraitUp]);
// 竖直下
SystemChrome.setPreferredOrientations([DeviceOrientation.portraitDown]);
// 水平左
SystemChrome.setPreferredOrientations([DeviceOrientation.landscapeLeft]);
// 水平右
SystemChrome.setPreferredOrientations([DeviceOrientation.landscapeRight]);

// 竖直上

SystemChrome.setPreferredOrientations([DeviceOrientation.portraitUp]);

// 竖直下

SystemChrome.setPreferredOrientations([DeviceOrientation.portraitDown]);

// 水平左

SystemChrome.setPreferredOrientations([DeviceOrientation.landscapeLeft]);

// 水平右

SystemChrome.setPreferredOrientations([DeviceOrientation.landscapeRight]);

2. 多方向

  若需要应用随重力感应变化方向，需设置多个方向属性；

1	若需要应用随重力感应变化方向，需设置多个方向属性；

// 竖直方向
SystemChrome.setPreferredOrientations([DeviceOrientation.portraitUp, DeviceOrientation.portraitDown]);
// 水平方向
SystemChrome.setPreferredOrientations([DeviceOrientation.landscapeLeft, DeviceOrientation.landscapeLeft]);
// 多方向
SystemChrome.setPreferredOrientations([DeviceOrientation.landscapeLeft, DeviceOrientation.landscapeLeft, DeviceOrientation.portraitUp]);

// 竖直方向

SystemChrome.setPreferredOrientations([DeviceOrientation.portraitUp, DeviceOrientation.portraitDown]);

// 水平方向

SystemChrome.setPreferredOrientations([DeviceOrientation.landscapeLeft, DeviceOrientation.landscapeLeft]);

// 多方向

SystemChrome.setPreferredOrientations([DeviceOrientation.landscapeLeft, DeviceOrientation.landscapeLeft, DeviceOrientation.portraitUp]);

Tips:

portraitDown 属性请注意，多方向时一般不会有效果，系统默认不会颠倒；
多方向设置时初始方向分两种情况，第一种：当前重力感应方向不在设置多方向列表中，初始方向为列表第一个设置方法；第二种：当前重力感应方向在设置多方向列表中，无论顺序第几位，默认均展示当前重力感应方向(非 portraitDown)。

setEnabledSystemUIOverlays

**setEnabledSystemUIOverlays** 是指定在应用程序运行时可见的系统叠加，主要对状态栏的操作，读起来比较拗口，但是看测试用例就很明了；参数分 **top 顶部 / bottom 底部** 两种；

这个 API 从 v2.3.0-17.0.pre 开始被标注为过期，被 setEnabledSystemUIMode 替代

**setEnabledSystemUIOverlays** 是指定在应用程序运行时可见的系统叠加，主要对状态栏的操作，读起来比较拗口，但是看测试用例就很明了；参数分 **top 顶部 / bottom 底部** 两种；

这个 API 从 v2.3.0-17.0.pre 开始被标注为过期，被 setEnabledSystemUIMode 替代

1. SystemUiOverlay.top

默认隐藏底部虚拟状态栏(需手机支持虚拟状态栏设备)，即三大金刚键；获取焦点后展示状态栏，展示大小为去掉状态栏时整体大小；

1	默认隐藏底部虚拟状态栏(需手机支持虚拟状态栏设备)，即三大金刚键；获取焦点后展示状态栏，展示大小为去掉状态栏时整体大小；

SystemChrome.setEnabledSystemUIOverlays([SystemUiOverlay.top]);

1	SystemChrome.setEnabledSystemUIOverlays([SystemUiOverlay.top]);

2. SystemUiOverlay.bottom

默认隐藏顶部虚拟状态栏，获取焦点后展示状态栏，展示大小为去掉状态栏时整体大小；

1	默认隐藏顶部虚拟状态栏，获取焦点后展示状态栏，展示大小为去掉状态栏时整体大小；

SystemChrome.setEnabledSystemUIOverlays([SystemUiOverlay.bottom]);

1	SystemChrome.setEnabledSystemUIOverlays([SystemUiOverlay.bottom]);

3. 两者皆有

即默认情况，顶部底部状态栏均展示；

1	即默认情况，顶部底部状态栏均展示；

SystemChrome.setEnabledSystemUIOverlays([SystemUiOverlay.top, SystemUiOverlay.bottom]);

1	SystemChrome.setEnabledSystemUIOverlays([SystemUiOverlay.top, SystemUiOverlay.bottom]);

setSystemUIOverlayStyle

**setSystemUIOverlayStyle** 用来设置状态栏顶部和底部样式，默认有 **light** 和 **dark** 模式，也可以按照需求自定义样式；

1	setSystemUIOverlayStyle 用来设置状态栏顶部和底部样式，默认有 light 和 dark 模式，也可以按照需求自定义样式；

1. systemNavigationBarColor

该属性仅用于 **Android** 设备且 **SDK >= O** 时，底部状态栏颜色；

1	该属性仅用于 Android 设备且 SDK >= O 时，底部状态栏颜色；

SystemChrome.setSystemUIOverlayStyle(const SystemUiOverlayStyle(systemNavigationBarColor: Colors.pink));

1	SystemChrome.setSystemUIOverlayStyle(const SystemUiOverlayStyle(systemNavigationBarColor: Colors.pink));

2. systemNavigationBarDividerColor

该属性仅用于 **Android** 设备且 **SDK >= P** 时，底部状态栏与主内容分割线颜色，效果不是很明显；

1	该属性仅用于 Android 设备且 SDK >= P 时，底部状态栏与主内容分割线颜色，效果不是很明显；

SystemChrome.setSystemUIOverlayStyle(const SystemUiOverlayStyle(systemNavigationBarDividerColor: Colors.yellow));

1	SystemChrome.setSystemUIOverlayStyle(const SystemUiOverlayStyle(systemNavigationBarDividerColor: Colors.yellow));

3. systemNavigationBarIconBrightness

该属性仅用于 **Android** 设备且 **SDK >= O** 时，底部状态栏图标样式，主要是三大按键颜色；

1	该属性仅用于 Android 设备且 SDK >= O 时，底部状态栏图标样式，主要是三大按键颜色；

SystemChrome.setSystemUIOverlayStyle(const SystemUiOverlayStyle(systemNavigationBarColor: Colors.pink));

1	SystemChrome.setSystemUIOverlayStyle(const SystemUiOverlayStyle(systemNavigationBarColor: Colors.pink));

4. statusBarColor

该属性仅用于 **Android** 设备且 **SDK >= M** 时，顶部状态栏颜色；

1	该属性仅用于 Android 设备且 SDK >= M 时，顶部状态栏颜色；

SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(statusBarColor: Colors.red));

1	SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(statusBarColor: Colors.red));

5. statusBarIconBrightness

该属性仅用于 **Android** 设备且 **SDK >= M** 时，顶部状态栏图标的亮度；但感觉并不明显；

1	该属性仅用于 Android 设备且 SDK >= M 时，顶部状态栏图标的亮度；但感觉并不明显；

SystemChrome.setSystemUIOverlayStyle(const SystemUiOverlayStyle(statusBarIconBrightness: Brightness.dark));

1	SystemChrome.setSystemUIOverlayStyle(const SystemUiOverlayStyle(statusBarIconBrightness: Brightness.dark));

6. statusBarBrightness

该属性仅用于 **iOS** 设备顶部状态栏亮度；

1	该属性仅用于 iOS 设备顶部状态栏亮度；

SystemChrome.setSystemUIOverlayStyle(const SystemUiOverlayStyle(statusBarBrightness: Brightness.light));

1	SystemChrome.setSystemUIOverlayStyle(const SystemUiOverlayStyle(statusBarBrightness: Brightness.light));

setApplicationSwitcherDescription

个人理解该属性显示效果是在应用程序切换器相关的应用程序的当前状态时，但是反复测试并没有实际效果，希望有理解的大神多多指点；

1	个人理解该属性显示效果是在应用程序切换器相关的应用程序的当前状态时，但是反复测试并没有实际效果，希望有理解的大神多多指点；

SystemChrome.setApplicationSwitcherDescription(
        const ApplicationSwitcherDescription(
            label: "Demo Flutter", primaryColor: 0xFFE53935))
    .then((_) {
  runApp(new MyApp());
});

SystemChrome.setApplicationSwitcherDescription(

const ApplicationSwitcherDescription(

label: "Demo Flutter", primaryColor: 0xFFE53935))

.then((_) {

runApp(new MyApp());

});

整体来说 **Flutter** 对顶部底部状态栏的设置很方便，只是有些理解不够深入的地方，有见解对朋友希望多多指导！

1	整体来说 Flutter 对顶部底部状态栏的设置很方便，只是有些理解不够深入的地方，有见解对朋友希望多多指导！

实践示例

上面都是对于 API 的介绍，但是在实际项目开发中，上述的代码究竟应该添加到何处呢？我们用 Flutter 新建项目的例子代码来演示，如下：

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        // This is the theme of your application.
        //
        // Try running your application with "flutter run". You'll see the
        // application has a blue toolbar. Then, without quitting the app, try
        // changing the primarySwatch below to Colors.green and then invoke
        // "hot reload" (press "r" in the console where you ran "flutter run",
        // or simply save your changes to "hot reload" in a Flutter IDE).
        // Notice that the counter didn't reset back to zero; the application
        // is not restarted.
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);

  // This widget is the home page of your application. It is stateful, meaning
  // that it has a State object (defined below) that contains fields that affect
  // how it looks.

  // This class is the configuration for the state. It holds the values (in this
  // case the title) provided by the parent (in this case the App widget) and
  // used by the build method of the State. Fields in a Widget subclass are
  // always marked "final".

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      // This call to setState tells the Flutter framework that something has
      // changed in this State, which causes it to rerun the build method below
      // so that the display can reflect the updated values. If we changed
      // _counter without calling setState(), then the build method would not be
      // called again, and so nothing would appear to happen.
      _counter++;
    });
  }

  @override
  void initState() {
    /// 初始化时隐藏
    SystemChrome.setEnabledSystemUIMode(SystemUiMode.manual, overlays: []);

    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    // This method is rerun every time setState is called, for instance as done
    // by the _incrementCounter method above.
    //
    // The Flutter framework has been optimized to make rerunning build methods
    // fast, so that you can just rebuild anything that needs updating rather
    // than having to individually change instances of widgets.
    return Scaffold(
      appBar: AppBar(
        // Here we take the value from the MyHomePage object that was created by
        // the App.build method, and use it to set our appbar title.
        title: Text(widget.title),
      ),
      body: Center(
        // Center is a layout widget. It takes a single child and positions it
        // in the middle of the parent.
        child: Column(
          // Column is also a layout widget. It takes a list of children and
          // arranges them vertically. By default, it sizes itself to fit its
          // children horizontally, and tries to be as tall as its parent.
          //
          // Invoke "debug painting" (press "p" in the console, choose the
          // "Toggle Debug Paint" action from the Flutter Inspector in Android
          // Studio, or the "Toggle Debug Paint" command in Visual Studio Code)
          // to see the wireframe for each widget.
          //
          // Column has various properties to control how it sizes itself and
          // how it positions its children. Here we use mainAxisAlignment to
          // center the children vertically; the main axis here is the vertical
          // axis because Columns are vertical (the cross axis would be
          // horizontal).
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            const Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headline4,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ), // This trailing comma makes auto-formatting nicer for build methods.
    );
  }
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

import 'package:flutter/material.dart';

import 'package:flutter/services.dart';

void main() {

runApp(const MyApp());

}

class MyApp extends StatelessWidget {

const MyApp({Key? key}) : super(key: key);

// This widget is the root of your application.

@override

Widget build(BuildContext context) {

return MaterialApp(

title: 'Flutter Demo',

theme: ThemeData(

// This is the theme of your application.

// Try running your application with "flutter run". You'll see the

// application has a blue toolbar. Then, without quitting the app, try

// changing the primarySwatch below to Colors.green and then invoke

// "hot reload" (press "r" in the console where you ran "flutter run",

// or simply save your changes to "hot reload" in a Flutter IDE).

// Notice that the counter didn't reset back to zero; the application

// is not restarted.

primarySwatch: Colors.blue,

home: const MyHomePage(title: 'Flutter Demo Home Page'),

);

}

class MyHomePage extends StatefulWidget {

const MyHomePage({Key? key, required this.title}) : super(key: key);

// This widget is the home page of your application. It is stateful, meaning

// that it has a State object (defined below) that contains fields that affect

// how it looks.

// This class is the configuration for the state. It holds the values (in this

// case the title) provided by the parent (in this case the App widget) and

// used by the build method of the State. Fields in a Widget subclass are

// always marked "final".

final String title;

@override

State<MyHomePage> createState() => _MyHomePageState();

}

class _MyHomePageState extends State<MyHomePage> {

int _counter = 0;

void _incrementCounter() {

setState(() {

// This call to setState tells the Flutter framework that something has

// changed in this State, which causes it to rerun the build method below

// so that the display can reflect the updated values. If we changed

// _counter without calling setState(), then the build method would not be

// called again, and so nothing would appear to happen.

_counter++;

});

}

@override

void initState() {

/// 初始化时隐藏

SystemChrome.setEnabledSystemUIMode(SystemUiMode.manual, overlays: []);

super.initState();

}

@override

Widget build(BuildContext context) {

// This method is rerun every time setState is called, for instance as done

// by the _incrementCounter method above.

// The Flutter framework has been optimized to make rerunning build methods

// fast, so that you can just rebuild anything that needs updating rather

// than having to individually change instances of widgets.

return Scaffold(

appBar: AppBar(

// Here we take the value from the MyHomePage object that was created by

// the App.build method, and use it to set our appbar title.

title: Text(widget.title),

body: Center(

// Center is a layout widget. It takes a single child and positions it

// in the middle of the parent.

child: Column(

// Column is also a layout widget. It takes a list of children and

// arranges them vertically. By default, it sizes itself to fit its

// children horizontally, and tries to be as tall as its parent.

// Invoke "debug painting" (press "p" in the console, choose the

// "Toggle Debug Paint" action from the Flutter Inspector in Android

// Studio, or the "Toggle Debug Paint" command in Visual Studio Code)

// to see the wireframe for each widget.

// Column has various properties to control how it sizes itself and

// how it positions its children. Here we use mainAxisAlignment to

// center the children vertically; the main axis here is the vertical

// axis because Columns are vertical (the cross axis would be

// horizontal).

mainAxisAlignment: MainAxisAlignment.center,

children: <Widget>[

const Text(

'You have pushed the button this many times:',

Text(

'$_counter',

style: Theme.of(context).textTheme.headline4,

floatingActionButton: FloatingActionButton(

onPressed: _incrementCounter,

tooltip: 'Increment',

child: const Icon(Icons.add),

), // This trailing comma makes auto-formatting nicer for build methods.

);

}

全屏模式简介

Flutter 定义了五种全屏模式，其实就是 Android/iOS 系统的全屏模式的映射，定义如下：

/// Describes different display configurations for both Android and iOS.
///
/// These modes mimic Android-specific display setups.
///
/// Used by [SystemChrome.setEnabledSystemUIMode].
enum SystemUiMode {
  /// Fullscreen display with status and navigation bars presentable by tapping
  /// anywhere on the display.
  ///
  /// Available starting at SDK 16 or Android J. Earlier versions of Android
  /// will not be affected by this setting.
  ///
  /// For applications running on iOS, the status bar and home indicator will be
  /// hidden for a similar fullscreen experience.
  ///
  /// Tapping on the screen displays overlays, this gesture is not received by
  /// the application.
  ///
  /// See also:
  ///
  ///   * [SystemUiChangeCallback], used to listen and respond to the change in
  ///     system overlays.
  leanBack,

  /// Fullscreen display with status and navigation bars presentable through a
  /// swipe gesture at the edges of the display.
  ///
  /// Available starting at SDK 19 or Android K. Earlier versions of Android
  /// will not be affected by this setting.
  ///
  /// For applications running on iOS, the status bar and home indicator will be
  /// hidden for a similar fullscreen experience.
  ///
  /// A swipe gesture from the edge of the screen displays overlays. In contrast
  /// to [SystemUiMode.immersiveSticky], this gesture is not received by the
  /// application.
  ///
  /// See also:
  ///
  ///   * [SystemUiChangeCallback], used to listen and respond to the change in
  ///     system overlays.
  immersive,

  /// Fullscreen display with status and navigation bars presentable through a
  /// swipe gesture at the edges of the display.
  ///
  /// Available starting at SDK 19 or Android K. Earlier versions of Android
  /// will not be affected by this setting.
  ///
  /// For applications running on iOS, the status bar and home indicator will be
  /// hidden for a similar fullscreen experience.
  ///
  /// A swipe gesture from the edge of the screen displays overlays. In contrast
  /// to [SystemUiMode.immersive], this gesture is received by the application.
  ///
  /// See also:
  ///
  ///   * [SystemUiChangeCallback], used to listen and respond to the change in
  ///     system overlays.
  immersiveSticky,

  /// Fullscreen display with status and navigation elements rendered over the
  /// application.
  ///
  /// Available starting at SDK 29 or Android 10. Earlier versions of Android
  /// will not be affected by this setting.
  ///
  /// For applications running on iOS, the status bar and home indicator will be
  /// visible.
  ///
  /// The system overlays will not disappear or reappear in this mode as they
  /// are permanently displayed on top of the application.
  ///
  /// See also:
  ///
  ///   * [SystemUiOverlayStyle], can be used to configure transparent status and
  ///     navigation bars with or without a contrast scrim.
  edgeToEdge,

  /// Declares manually configured [SystemUiOverlay]s.
  ///
  /// When using this mode with [SystemChrome.setEnabledSystemUIMode], the
  /// preferred overlays must be set by the developer.
  ///
  /// When [SystemUiOverlay.top] is enabled, the status bar will remain visible
  /// on all platforms. Omitting this overlay will hide the status bar on iOS &
  /// Android.
  ///
  /// When [SystemUiOverlay.bottom] is enabled, the navigation bar and home
  /// indicator of Android and iOS applications will remain visible. Omitting this
  /// overlay will hide them.
  ///
  /// Omitting both overlays will result in the same configuration as
  /// [SystemUiMode.leanBack].
  manual,
}

/// Describes different display configurations for both Android and iOS.

///

/// These modes mimic Android-specific display setups.

///

/// Used by [SystemChrome.setEnabledSystemUIMode].

enum SystemUiMode {

/// Fullscreen display with status and navigation bars presentable by tapping

/// anywhere on the display.

///

/// Available starting at SDK 16 or Android J. Earlier versions of Android

/// will not be affected by this setting.

///

/// For applications running on iOS, the status bar and home indicator will be

/// hidden for a similar fullscreen experience.

///

/// Tapping on the screen displays overlays, this gesture is not received by

/// the application.

///

/// See also:

///

/// * [SystemUiChangeCallback], used to listen and respond to the change in

/// system overlays.

leanBack,

/// Fullscreen display with status and navigation bars presentable through a

/// swipe gesture at the edges of the display.

///

/// Available starting at SDK 19 or Android K. Earlier versions of Android

/// will not be affected by this setting.

///

/// For applications running on iOS, the status bar and home indicator will be

/// hidden for a similar fullscreen experience.

///

/// A swipe gesture from the edge of the screen displays overlays. In contrast

/// to [SystemUiMode.immersiveSticky], this gesture is not received by the

/// application.

///

/// See also:

///

/// * [SystemUiChangeCallback], used to listen and respond to the change in

/// system overlays.

immersive,

/// Fullscreen display with status and navigation bars presentable through a

/// swipe gesture at the edges of the display.

///

/// Available starting at SDK 19 or Android K. Earlier versions of Android

/// will not be affected by this setting.

///

/// For applications running on iOS, the status bar and home indicator will be

/// hidden for a similar fullscreen experience.

///

/// A swipe gesture from the edge of the screen displays overlays. In contrast

/// to [SystemUiMode.immersive], this gesture is received by the application.

///

/// See also:

///

/// * [SystemUiChangeCallback], used to listen and respond to the change in

/// system overlays.

immersiveSticky,

/// Fullscreen display with status and navigation elements rendered over the

/// application.

///

/// Available starting at SDK 29 or Android 10. Earlier versions of Android

/// will not be affected by this setting.

///

/// For applications running on iOS, the status bar and home indicator will be

/// visible.

///

/// The system overlays will not disappear or reappear in this mode as they

/// are permanently displayed on top of the application.

///

/// See also:

///

/// * [SystemUiOverlayStyle], can be used to configure transparent status and

/// navigation bars with or without a contrast scrim.

edgeToEdge,

/// Declares manually configured [SystemUiOverlay]s.

///

/// When using this mode with [SystemChrome.setEnabledSystemUIMode], the

/// preferred overlays must be set by the developer.

///

/// When [SystemUiOverlay.top] is enabled, the status bar will remain visible

/// on all platforms. Omitting this overlay will hide the status bar on iOS &

/// Android.

///

/// When [SystemUiOverlay.bottom] is enabled, the navigation bar and home

/// indicator of Android and iOS applications will remain visible. Omitting this

/// overlay will hide them.

///

/// Omitting both overlays will result in the same configuration as

/// [SystemUiMode.leanBack].

manual,

}

下面我们简单介绍一下这几种模式的区别：

1. leanBack ：向后倾斜模式适用于用户不会与屏幕进行大量互动的全屏体验，例如在观看视频时。
当用户希望调出系统栏时，只需点按屏幕上的任意位置即可。

2. immersive : 沉浸模式适用于用户将与屏幕进行大量互动的应用。示例包括游戏、查看图库中的图片或者阅读分页内容，如图书或演示文稿中的幻灯片。
当用户需要调出系统栏时，他们可从隐藏系统栏的任一边滑动。要求使用这种这种意图更强的手势是为了确保用户与您应用的互动不会因意外轻触和滑动而中断。

3. immersiveSticky : 在普通的沉浸模式中，只要用户从边缘滑动，系统就会负责显示系统栏，您的应用甚至不会知道发生了该手势。因此，如果用户实际上可能是出于主要的应用体验而需要从屏幕边缘滑动，例如在玩需要大量滑动的游戏或使用绘图应用时，您应改为启用“粘性”沉浸模式。
在粘性沉浸模式下，如果用户从隐藏了系统栏的边缘滑动，系统栏会显示出来，但它们是半透明的，并且轻触手势会传递给应用，因此应用也会响应该手势。
例如，在使用这种方法的绘图应用中，如果用户想绘制从屏幕最边缘开始的线条，则从这个边缘滑动会显示系统栏，同时还会开始绘制从最边缘开始的线条。无互动几秒钟后，或者用户在系统栏之外的任何位置轻触或做手势时，系统栏会自动消失。

4. edgeToEdge : 实现从边到边的全面屏体验后，系统栏会覆盖在应用内容前方。应用也得以通过更大幅面的内容为用户带来更具有冲击力的体验。

5. manual ：手动配置，可以独立配置状态栏，导航栏的显示与隐藏。如果选择状态栏，导航栏都隐藏，那么行为与向后倾斜模式相同。

适配安卓刘海、水滴屏显示全屏

上面的配置在刘海、水滴屏幕上会在顶部出现一道黑色的背景，比如 Honor 30 。解决方法就是将 shortEdges 放到 style 标签内。如下：

找到 android/app/src/main/res/目录，新建 values-v27 目录(这个API从Android API 27 才开始支持)，并在目录下创建 styles.xml ，内容从原来的 values/styles.xml 中拷贝出来，将 shortEdges 放到 style 标签内，如下：

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <!-- Theme applied to the Android Window while the process is starting -->
    <style name="LaunchTheme" parent="@android:style/Theme.Black.NoTitleBar">
        <!-- Show a splash screen on the activity. Automatically removed when
             Flutter draws its first frame -->
        <item name="android:windowBackground">@drawable/launch_background</item>
        
        <!-- 刘海，水滴屏幕全屏适配 -->
        <item name="android:windowLayoutInDisplayCutoutMode">shortEdges</item>
    </style>
    <!-- Theme applied to the Android Window as soon as the process has started.
         This theme determines the color of the Android Window while your
         Flutter UI initializes, as well as behind your Flutter UI while its
         running.
         
         This Theme is only used starting with V2 of Flutter's Android embedding. -->
    <style name="NormalTheme" parent="@android:style/Theme.Black.NoTitleBar">
        <item name="android:windowBackground">@android:color/white</item>
        
        <!-- 刘海，水滴屏幕全屏适配 -->
        <item name="android:windowLayoutInDisplayCutoutMode">shortEdges</item>
    </style>
</resources>

<?xml version="1.0" encoding="utf-8"?>

<!-- Show a splash screen on the activity. Automatically removed when

Flutter draws its first frame -->

<item name="android:windowBackground">@drawable/launch_background</item>

<item name="android:windowLayoutInDisplayCutoutMode">shortEdges</item>

</style>

<!-- Theme applied to the Android Window as soon as the process has started.

This theme determines the color of the Android Window while your

Flutter UI initializes, as well as behind your Flutter UI while its

running.

This Theme is only used starting with V2 of Flutter's Android embedding. -->

<item name="android:windowBackground">@android:color/white</item>

<item name="android:windowLayoutInDisplayCutoutMode">shortEdges</item>

</style>

</resources>

LaunchTheme 指的是启动页的主题，也就是我们常说的 Splash 页面。如果需要启动页全屏就放在里面。

NormalTheme 代表正常页面的主题。

同样需要修改暗黑主题相关的风格文件，如下：

创建 android/app/src/main/res/values-night-v27 目录，新建 styles.xml ，将 shortEdges 放到 style 标签内 (这个API从Android API 27 才开始支持)，如下：

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <!-- Theme applied to the Android Window while the process is starting -->
    <style name="LaunchTheme" parent="@android:style/Theme.Black.NoTitleBar">
        <!-- Show a splash screen on the activity. Automatically removed when
             Flutter draws its first frame -->
        <item name="android:windowBackground">@drawable/launch_background</item>

        <!-- 刘海，水滴屏幕全屏适配 -->
        <item name="android:windowLayoutInDisplayCutoutMode">shortEdges</item>
    </style>
    <!-- Theme applied to the Android Window as soon as the process has started.
         This theme determines the color of the Android Window while your
         Flutter UI initializes, as well as behind your Flutter UI while its
         running.
         
         This Theme is only used starting with V2 of Flutter's Android embedding. -->
    <style name="NormalTheme" parent="@android:style/Theme.Black.NoTitleBar">
        <item name="android:windowBackground">@android:color/white</item>
        
        <!-- 刘海，水滴屏幕全屏适配 -->
        <item name="android:windowLayoutInDisplayCutoutMode">shortEdges</item>
    </style>
</resources>

<?xml version="1.0" encoding="utf-8"?>

<!-- Show a splash screen on the activity. Automatically removed when

Flutter draws its first frame -->

<item name="android:windowBackground">@drawable/launch_background</item>

<item name="android:windowLayoutInDisplayCutoutMode">shortEdges</item>

</style>

<!-- Theme applied to the Android Window as soon as the process has started.

This theme determines the color of the Android Window while your

Flutter UI initializes, as well as behind your Flutter UI while its

running.

This Theme is only used starting with V2 of Flutter's Android embedding. -->

<item name="android:windowBackground">@android:color/white</item>

<item name="android:windowLayoutInDisplayCutoutMode">shortEdges</item>

</style>

</resources>

参考链接

不同版本的TLS在Android/iOS中的支持情况

本文要解决的两类问题：

在Android4.1-Android5.0的系统上启用TLSv1.1和TLSv1.2
java.lang.IllegalArgumentException: protocol TLSv1.1 is not supported

这两个问题比较具有代表性，在群里面讨论的时候见过的次数也是最多的，因此有些人遇到的问题也许协议名称不一样，但是本质都是类似的。

问题原因和解决思路分析

从 Android5.0 行为变更可以看到 Android 5.0 开始默认启用了 TLSv1.1 和 TLSv1.2，但是从 Android 4.1 开始 TLSv1.1 和 TLSv1.2 其实就被支持了，只是默认没有启用而已。

我们最常用到的几种协议是SSLv3、TLSv1、TLSv1.1和 TLSv1.2，解决上面两个问题要搞清楚的是这几个协议在Android 系统中被支持的情况和被启用的情况，然后我们结合 minSdkVersion 和 targetSdkVersion 来选择协议即可，不同版本的 Android 系统对上述协议的支持情况：

客户端（SSLSocket）的支持情况：

协议	被支持（Api级别）	被启用（Api级别）
SSLv3	1–25	1–22
TLSv1	1+	1+
TLSv1.1	16+	20+
TLSv1.2	16+	20+

服务端（SSLServerSocket）的支持情况：

协议	被支持（Api级别）	被启用（Api级别）
SSLv3	1–25	1–22
TLSv1	1+	1+
TLSv1.1	16+	16+
TLSv1.2	16+	16+

数据来源：https://developer.android.com/reference/javax/net/ssl/SSLSocket

注意：这里说的客户端和服务端不是指Android端和JavaEE端/PHP端（还有Python、.NET等等），是指的在Android开发中的客户端Socket（SSLSocket）和服务端Socket（SSLServerSocket）。

到这里其实已经知道本文开始处的问题的原因了，TLSv1.1和TLSv1.2从Android4.1（Api级别16）开始才被支持，从Android4.4 Wear（Api级别20）才被启用（手机是Android5.0，Api级别21），因此在不同版本的Android系统中会出现需要被启用和启用时报不被支持的问题。

我们可以写一个TLS协议通用的兼容类，在所有的Android中强制启用已经被支持的所有协议，总结一下就是Android8.0及以上系统可以强制启用TLSv1、TLSv1.1和TLSv1.2协议，Android4.1-Android7.1.1系统可以强制启用SSLv3、TLSv1、TLSv1.1和TLSv1.2协议，其它版本系统可以强制启用SSLv3和TLSv1协议。

综上所述，如果开发者使用SSLv3协议，那么minSdkVersion不限制，targetSdkVersion不高于25，并且需要尽快更新为TLSv1.1协议或者TLS1.2协议；如果开发者使用TLSv1.1协议或者TLSv1.2协议，那么minSdkVersion应该不低于16，targetSdkVersion不限制；如果开发者使用TLSv1协议，那么目前不受限制。

代码实现

我们需要让SSLSocket启用对应的协议，代码对应的方法是：

SSLSocket#setEnabledProtocols(String[]);

1	SSLSocket#setEnabledProtocols(String[]);

因此我们需要先在不同版本的Android系统中生成不同的协议数组：

private static final String PROTOCOL_ARRAY[];

static {
    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.O) {
        PROTOCOL_ARRAY = new String[]{"TLSv1", "TLSv1.1", "TLSv1.2"};
    } else if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.JELLY_BEAN) {
        PROTOCOL_ARRAY = new String[]{"SSLv3", "TLSv1", "TLSv1.1", "TLSv1.2"};
    } else {
        PROTOCOL_ARRAY = new String[]{"SSLv3", "TLSv1"};
    }
}

private static final String PROTOCOL_ARRAY[];

static {

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.O) {

PROTOCOL_ARRAY = new String[]{"TLSv1", "TLSv1.1", "TLSv1.2"};

} else if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.JELLY_BEAN) {

PROTOCOL_ARRAY = new String[]{"SSLv3", "TLSv1", "TLSv1.1", "TLSv1.2"};

} else {

PROTOCOL_ARRAY = new String[]{"SSLv3", "TLSv1"};

}

SSLSocket是由SSLSocketFactory负责生成的，我们再写一个SSLSocketFactory的包装类，主要代码如下：

public class TLSSocketFactory extends SSLSocketFactory {

    private static final String PROTOCOL_ARRAY[];

    static {
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.O) {
            PROTOCOL_ARRAY = new String[]{"TLSv1", "TLSv1.1", "TLSv1.2"};
        } else if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.JELLY_BEAN) {
            PROTOCOL_ARRAY = new String[]{"SSLv3", "TLSv1", "TLSv1.1", "TLSv1.2"};
        } else {
            PROTOCOL_ARRAY = new String[]{"SSLv3", "TLSv1"};
        }
    }

    private SSLSocketFactory delegate;

    /**
     * 默认构造方法，直接生成启用所有协议的SSLSocket。
     */
    public TLSSocketFactory() {
        try {
            SSLContext sslContext = SSLContext.getInstance("TLS");
            sslContext.init(null, new TrustManager[]{DEFAULT_TRUST_MANAGERS}, new SecureRandom());
            delegate = sslContext.getSocketFactory();
        } catch (GeneralSecurityException e) {
            throw new AssertionError(); // The system has no TLS. Just give up.
        }
    }

    /**
     * 包装SSLSocketFactory的构造方法，让外部生成的SSLScoket启用所有协议。
     */
    public TLSSocketFactory(SSLSocketFactory factory) {
        this.delegate = factory;
    }

    /**
     * 如果是SSLSocket，启用所有协议。
     */
    private static void setSupportProtocolAndCipherSuites(Socket socket) {
        if (socket instanceof SSLSocket) {
            ((SSLSocket) socket).setEnabledProtocols(PROTOCOL_ARRAY);
        }
    }

    // TODO 下面省去每一个createSocket()方法调用setSupportProtocolAndCipherSuites()方法的代码。
}

public class TLSSocketFactory extends SSLSocketFactory {

private static final String PROTOCOL_ARRAY[];

static {

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.O) {

PROTOCOL_ARRAY = new String[]{"TLSv1", "TLSv1.1", "TLSv1.2"};

} else if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.JELLY_BEAN) {

PROTOCOL_ARRAY = new String[]{"SSLv3", "TLSv1", "TLSv1.1", "TLSv1.2"};

} else {

PROTOCOL_ARRAY = new String[]{"SSLv3", "TLSv1"};

}

private SSLSocketFactory delegate;

/**

* 默认构造方法，直接生成启用所有协议的SSLSocket。

public TLSSocketFactory() {

try {

SSLContext sslContext = SSLContext.getInstance("TLS");

sslContext.init(null, new TrustManager[]{DEFAULT_TRUST_MANAGERS}, new SecureRandom());

delegate = sslContext.getSocketFactory();

} catch (GeneralSecurityException e) {

throw new AssertionError(); // The system has no TLS. Just give up.

}

/**

* 包装SSLSocketFactory的构造方法，让外部生成的SSLScoket启用所有协议。

public TLSSocketFactory(SSLSocketFactory factory) {

this.delegate = factory;

}

/**

* 如果是SSLSocket，启用所有协议。

private static void setSupportProtocolAndCipherSuites(Socket socket) {

if (socket instanceof SSLSocket) {

((SSLSocket) socket).setEnabledProtocols(PROTOCOL_ARRAY);

}

// TODO 下面省去每一个createSocket()方法调用setSupportProtocolAndCipherSuites()方法的代码。

}

iOS客户端支持情况

iOS 客户端（SSLSocket）的支持情况：

TLS 1.2 从 iOS 5 开始支持（TLS 1.2 was first added to iOS in iOS 5）

另外对于在 2020 年 9 月 1 日格林尼治标准时间/世界标准时间 00:00 或之后颁发的 TLS 服务器证书，其有效期不得超过 398 天。

参考链接

macOS Big Sur(11.6.7/Intel CPU)编译Android/iOS/macOS版本的RocksDB 6.29.5

从 RocksDB 7.0 开始，RocksDB 要求编译的 C++ 必须支持 C++ 17 ，（ Dropping some compiler support in 7.0#9388）但是目前的Android/iOS版本显然暂时还不能大范围的适配 C++ 17，因此我们目前只能使用 6.x 版本。

Android:

# Android NDK 22.1.7171670

$ brew install git

$ brew install cmake

$ brew install sed

$ git clone https://github.com/facebook/rocksdb.git

$ git checkout v6.29.5

# 修改代码，消除警告视为错误，否则会编译不通过
$ gsed -i "s/-Werror//g" CMakeLists.txt

# Android最低支持的版本是 Android 23 低于这个版本会出现API缺失导致编译失败

$ cmake . -DCMAKE_ANDROID_NDK=/Users/xxxx/Library/Android/sdk/ndk-bundle \
-DCMAKE_SYSTEM_NAME=Android \
-DCMAKE_SYSTEM_VERSION=23 \
-DCMAKE_ANDROID_STL_TYPE=c++_shared \
-DROCKSDB_LITE=ON \
-DPORTABLE=ON \
-DCMAKE_POSITION_INDEPENDENT_CODE=ON \
-DWITH_TESTS=OFF \
-DWITH_TOOLS=OFF \
-DWITH_GFLAGS=OFF \
-DCMAKE_BUILD_TYPE=Release \
-DCMAKE_ANDROID_ARCH_ABI=arm64-v8a 

// -DCMAKE_ANDROID_ARCH_ABI=arm64-v8a 
// -DCMAKE_ANDROID_ARCH_ABI=armeabi-v7a 
// -DCMAKE_ANDROID_ARCH_ABI=armeabi 
// -DCMAKE_ANDROID_ARCH_ABI=x86 
// -DCMAKE_ANDROID_ARCH_ABI=x86_64

$ make

# 在当前目录下生成
# librocksdb.so

# Android NDK 22.1.7171670

$ brew install git

$ brew install cmake

$ brew install sed

$ git clone https://github.com/facebook/rocksdb.git

$ git checkout v6.29.5

# 修改代码，消除警告视为错误，否则会编译不通过

$ gsed -i "s/-Werror//g" CMakeLists.txt

# Android最低支持的版本是 Android 23 低于这个版本会出现API缺失导致编译失败

$ cmake . -DCMAKE_ANDROID_NDK=/Users/xxxx/Library/Android/sdk/ndk-bundle \

-DCMAKE_SYSTEM_NAME=Android \

-DCMAKE_SYSTEM_VERSION=23 \

-DCMAKE_ANDROID_STL_TYPE=c++_shared \

-DROCKSDB_LITE=ON \

-DPORTABLE=ON \

-DCMAKE_POSITION_INDEPENDENT_CODE=ON \

-DWITH_TESTS=OFF \

-DWITH_TOOLS=OFF \

-DWITH_GFLAGS=OFF \

-DCMAKE_BUILD_TYPE=Release \

-DCMAKE_ANDROID_ARCH_ABI=arm64-v8a

// -DCMAKE_ANDROID_ARCH_ABI=arm64-v8a

// -DCMAKE_ANDROID_ARCH_ABI=armeabi-v7a

// -DCMAKE_ANDROID_ARCH_ABI=armeabi

// -DCMAKE_ANDROID_ARCH_ABI=x86

// -DCMAKE_ANDROID_ARCH_ABI=x86_64

$ make

# 在当前目录下生成

# librocksdb.so

iOS/macOS ARM:

#Xcode Version 13.2.1 (13C100)

$ brew install git

$ brew install cmake

$ git clone https://github.com/facebook/rocksdb.git

$ git checkout v6.29.5

$ export PORTABLE=1

$ export TARGET_OS=IOS

$ export ROCKSDB_LITE=1

$ export IOS_CROSS_COMPILE=1

# int128兼容支持，默认支持，但是在iOS设备上是不支持的
$ export TEST_UINT128_COMPAT=1

$ export DISABLE_WARNING_AS_ERROR=1

$ export DEBUG_LEVEL=0 

$ export EXTRA_CXXFLAGS="-DNPERF_CONTEXT -DNIOSTATS_CONTEXT"

# iOS目前只能构建静态库，不能构建动态库
$ make V=1 VERBOSE=1 -j16 static_lib

#Xcode Version 13.2.1 (13C100)

$ brew install git

$ brew install cmake

$ git clone https://github.com/facebook/rocksdb.git

$ git checkout v6.29.5

$ export PORTABLE=1

$ export TARGET_OS=IOS

$ export ROCKSDB_LITE=1

$ export IOS_CROSS_COMPILE=1

# int128兼容支持，默认支持，但是在iOS设备上是不支持的

$ export TEST_UINT128_COMPAT=1

$ export DISABLE_WARNING_AS_ERROR=1

$ export DEBUG_LEVEL=0

$ export EXTRA_CXXFLAGS="-DNPERF_CONTEXT -DNIOSTATS_CONTEXT"

# iOS目前只能构建静态库，不能构建动态库

$ make V=1 VERBOSE=1 -j16 static_lib

macOS x86:

#Xcode Version 13.2.1 (13C100)

$ brew install git

$ brew install cmake

$ git clone https://github.com/facebook/rocksdb.git

$ git checkout v6.29.5

$ export PORTABLE=1

$ export ROCKSDB_LITE=1

# int128兼容支持，默认支持，但是在iOS设备上是不支持的
$ export TEST_UINT128_COMPAT=1

$ export DISABLE_WARNING_AS_ERROR=1

$ export DEBUG_LEVEL=0 

$ export EXTRA_CXXFLAGS="-DNPERF_CONTEXT -DNIOSTATS_CONTEXT"

$ make V=1 VERBOSE=1 -j16 static_lib

# make V=1 VERBOSE=1 -j16 shared_lib 动态库

#Xcode Version 13.2.1 (13C100)

$ brew install git

$ brew install cmake

$ git clone https://github.com/facebook/rocksdb.git

$ git checkout v6.29.5

$ export PORTABLE=1

$ export ROCKSDB_LITE=1

# int128兼容支持，默认支持，但是在iOS设备上是不支持的

$ export TEST_UINT128_COMPAT=1

$ export DISABLE_WARNING_AS_ERROR=1

$ export DEBUG_LEVEL=0

$ export EXTRA_CXXFLAGS="-DNPERF_CONTEXT -DNIOSTATS_CONTEXT"

$ make V=1 VERBOSE=1 -j16 static_lib

# make V=1 VERBOSE=1 -j16 shared_lib 动态库

参考链接

Android官方推荐: DialogFragment创建对话框

最近在使用官方的 Android Jetpack 库的时候，发现 Activity/Fragment 都有对应的 lifecycle（生命周期） 组件，比如ViewModel。唯独 Dialog 没有对应的组件，感觉非常奇怪。

搜索了一通，发现官方推荐 DialogFragment 替代直接使用 Dialog 。 DialogFragment 在 Android 3.0 时被引入，是一种特殊的 Fragment ，用于在 Activity 的内容之上展示一个模态的对话框。典型的用于：展示警告框，输入框，确认框等等。

在 DialogFragment 产生之前，我们创建对话框：一般采用 AlertDialog 和 Dialog 。注意：官方不推荐直接使用Dialog创建对话框。

另外，更常见的在 logcat 中经常看到输出由于 Dialog 引起的 WindowLeaked 日志，这个日志产生的原因就是 Dialog 显示所依赖的 Activity 被销毁/重建的时候没有关闭显示在上层的 Dialog 。但是很多时候我们不方便在 Activity 的 onDestroy() 中查找全部的 Dialog 来逐个关闭，尤其是依赖的 Activity 是第三方的 SDK 创建的情况下。这种情况下，DialogFragment 不失为一个好的替代选项。

好处与用法

使用DialogFragment来管理对话框，当旋转屏幕和按下后退键时可以更好的管理其声明周期，它和Fragment有着基本一致的生命周期。且DialogFragment也允许开发者把Dialog作为内嵌的组件进行重用，类似Fragment（可以在大屏幕和小屏幕显示出不同的效果）。下面会通过例子展示这些好处~

使用DialogFragment至少需要实现onCreateView或者onCreateDIalog方法。onCreateView即使用定义的xml布局文件展示Dialog。onCreateDialog即利用AlertDialog或者Dialog创建出Dialog。

重写onCreateView创建Dialog

a)布局文件，我们创建一个设置名称的布局文件：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" >
 
    <TextView
        android:id="@+id/id_label_your_name"
        android:layout_width="wrap_content"
        android:layout_height="32dp"
        android:gravity="center_vertical"
        android:text="Your name:" />
 
    <EditText
        android:id="@+id/id_txt_your_name"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_toRightOf="@id/id_label_your_name"
        android:imeOptions="actionDone"
        android:inputType="text" />
 
    <Button
        android:id="@+id/id_sure_edit_name"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_below="@id/id_txt_your_name"
        android:text="ok" />
 
</RelativeLayout>

<?xml version="1.0" encoding="utf-8"?>

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"

android:layout_width="wrap_content"

android:layout_height="wrap_content" >

<TextView

android:id="@+id/id_label_your_name"

android:layout_width="wrap_content"

android:layout_height="32dp"

android:gravity="center_vertical"

android:text="Your name:" />

<EditText

android:id="@+id/id_txt_your_name"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:layout_toRightOf="@id/id_label_your_name"

android:imeOptions="actionDone"

android:inputType="text" />

<Button

android:id="@+id/id_sure_edit_name"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_alignParentRight="true"

android:layout_below="@id/id_txt_your_name"

android:text="ok" />

</RelativeLayout>

b)继承DialogFragment，重写onCreateView方法

package com.example.zhy_dialogfragment;
 
import android.app.DialogFragment;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
 
public class EditNameDialogFragment extends DialogFragment {
 
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
			Bundle savedInstanceState) {
        final View view = inflater.inflate(R.layout.fragment_edit_name, container);
        return view;
    }
}

package com.example.zhy_dialogfragment;

import android.app.DialogFragment;

import android.os.Bundle;

import android.view.LayoutInflater;

import android.view.View;

import android.view.ViewGroup;

public class EditNameDialogFragment extends DialogFragment {

@Override

public View onCreateView(LayoutInflater inflater, ViewGroup container,

Bundle savedInstanceState) {

final View view = inflater.inflate(R.layout.fragment_edit_name, container);

return view;

}

c)测试运行：
Main方法中调用：

public void showEditDialog(View view) {
    final EditNameDialogFragment editNameDialog = new EditNameDialogFragment();
    editNameDialog.show(getFragmentManager(), "EditNameDialog");
}

public void showEditDialog(View view) {

final EditNameDialogFragment editNameDialog = new EditNameDialogFragment();

editNameDialog.show(getFragmentManager(), "EditNameDialog");

}

效果图：

可以看到，对话框成功创建并显示出来，不过默认对话框有个讨厌的标题，我们怎么去掉呢：可以在onCreateView中调用getDialog().requestWindowFeature(Window.FEATURE_NO_TITLE);即可去掉。即：

public class EditNameDialogFragment extends DialogFragment {
 
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
			Bundle savedInstanceState) {
        getDialog().requestWindowFeature(Window.FEATURE_NO_TITLE);
        final View view = inflater.inflate(R.layout.fragment_edit_name, container);
        return view;
    }
}

public class EditNameDialogFragment extends DialogFragment {

@Override

public View onCreateView(LayoutInflater inflater, ViewGroup container,

Bundle savedInstanceState) {

getDialog().requestWindowFeature(Window.FEATURE_NO_TITLE);

final View view = inflater.inflate(R.layout.fragment_edit_name, container);

return view;

}

效果图：

很完美的去掉了讨厌的标题。

重写onCreateDialog创建Dialog

在 onCreateDialog 中一般可以使用 AlertDialog 或者 Dialog 创建对话框，不过既然 Google 不推荐直接使用 Dialog，我们就使用 AlertDialog 来创建一个登录的对话框。
a)布局文件

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="vertical" >
 
    <ImageView
        android:layout_width="match_parent"
        android:layout_height="64dp"
        android:background="#FFFFBB33"
        android:contentDescription="@string/app_name"
        android:scaleType="center"
        android:src="@drawable/title" />
 
    <EditText
        android:id="@+id/id_txt_username"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginBottom="4dp"
        android:layout_marginLeft="4dp"
        android:layout_marginRight="4dp"
        android:layout_marginTop="16dp"
        android:hint="input username"
        android:inputType="textEmailAddress" />
 
    <EditText
        android:id="@+id/id_txt_password"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginBottom="16dp"
        android:layout_marginLeft="4dp"
        android:layout_marginRight="4dp"
        android:layout_marginTop="4dp"
        android:fontFamily="sans-serif"
        android:hint="input password"
        android:inputType="textPassword" />
 
</LinearLayout>

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:orientation="vertical" >

<ImageView

android:layout_width="match_parent"

android:layout_height="64dp"

android:background="#FFFFBB33"

android:contentDescription="@string/app_name"

android:scaleType="center"

android:src="@drawable/title" />

<EditText

android:id="@+id/id_txt_username"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:layout_marginBottom="4dp"

android:layout_marginLeft="4dp"

android:layout_marginRight="4dp"

android:layout_marginTop="16dp"

android:hint="input username"

android:inputType="textEmailAddress" />

<EditText

android:id="@+id/id_txt_password"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:layout_marginBottom="16dp"

android:layout_marginLeft="4dp"

android:layout_marginRight="4dp"

android:layout_marginTop="4dp"

android:fontFamily="sans-serif"

android:hint="input password"

android:inputType="textPassword" />

</LinearLayout>

b)继承 DialogFragment 重写 onCreateDialog 方法

package com.example.zhy_dialogfragment;
 
import android.app.AlertDialog;
import android.app.Dialog;
import android.app.DialogFragment;
import android.content.DialogInterface;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.EditText;
 
public class LoginDialogFragment extends DialogFragment {
 
    @Override
    public Dialog onCreateDialog(Bundle savedInstanceState) {
        final AlertDialog.Builder builder = new AlertDialog.Builder(getActivity());
        // Get the layout inflater
        final LayoutInflater inflater = getActivity().getLayoutInflater();
        final View view = inflater.inflate(R.layout.fragment_login_dialog, null);
        // Inflate and set the layout for the dialog
        // Pass null as the parent view because its going in the dialog layout
        builder.setView(view)
            // Add action buttons
            .setPositiveButton("Sign in",
                new DialogInterface.OnClickListener() {
                    @Override
                    public void onClick(DialogInterface dialog, int id) {
                    }
                }).setNegativeButton("Cancel", null);
        return builder.create();
    }
}

package com.example.zhy_dialogfragment;

import android.app.AlertDialog;

import android.app.Dialog;

import android.app.DialogFragment;

import android.content.DialogInterface;

import android.os.Bundle;

import android.view.LayoutInflater;

import android.view.View;

import android.view.ViewGroup;

import android.widget.EditText;

public class LoginDialogFragment extends DialogFragment {

@Override

public Dialog onCreateDialog(Bundle savedInstanceState) {

final AlertDialog.Builder builder = new AlertDialog.Builder(getActivity());

// Get the layout inflater

final LayoutInflater inflater = getActivity().getLayoutInflater();

final View view = inflater.inflate(R.layout.fragment_login_dialog, null);

// Inflate and set the layout for the dialog

// Pass null as the parent view because its going in the dialog layout

builder.setView(view)

// Add action buttons

.setPositiveButton("Sign in",

new DialogInterface.OnClickListener() {

@Override

public void onClick(DialogInterface dialog, int id) {

}

}).setNegativeButton("Cancel", null);

return builder.create();

}

c)调用

public void showLoginDialog(View view) {
    final LoginDialogFragment dialog = new LoginDialogFragment();
    dialog.show(getFragmentManager(), "loginDialog");
}

public void showLoginDialog(View view) {

final LoginDialogFragment dialog = new LoginDialogFragment();

dialog.show(getFragmentManager(), "loginDialog");

}

效果图：

可以看到通过重写 onCreateDialog 同样可以实现创建对话框，效果还是很nice的。

传递数据给Activity

从dialog传递数据给Activity，可以使用“fragment interface pattern”的方式，下面通过一个改造上面的登录框来展示这种模式。

改动比较小，直接贴代码了：

package com.example.zhy_dialogfragment;
 
import android.app.AlertDialog;
import android.app.Dialog;
import android.app.DialogFragment;
import android.content.DialogInterface;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.EditText;
 
public class LoginDialogFragment extends DialogFragment {
    private EditText mUsername;
    private EditText mPassword;
 
    public interface LoginInputListener {
        void onLoginInputComplete(String username, String password);
    }
	
    @Override
    public Dialog onCreateDialog(Bundle savedInstanceState) {
        final AlertDialog.Builder builder = new AlertDialog.Builder(getActivity());
        // Get the layout inflater
        final LayoutInflater inflater = getActivity().getLayoutInflater();
        final View view = inflater.inflate(R.layout.fragment_login_dialog, null);
        mUsername = (EditText) view.findViewById(R.id.id_txt_username);
        mPassword = (EditText) view.findViewById(R.id.id_txt_password);
        // Inflate and set the layout for the dialog
        // Pass null as the parent view because its going in the dialog layout
        builder.setView(view)
            // Add action buttons
            .setPositiveButton("Sign in",
                new DialogInterface.OnClickListener() {
                    @Override
                    public void onClick(DialogInterface dialog, int id) {
                        final LoginInputListener listener = (LoginInputListener) getActivity();
                        listener.onLoginInputComplete(mUsername.getText().toString(), mPassword.getText().toString());
                    }
                }).setNegativeButton("Cancel", null);
        return builder.create();
    }
}

package com.example.zhy_dialogfragment;

import android.app.AlertDialog;

import android.app.Dialog;

import android.app.DialogFragment;

import android.content.DialogInterface;

import android.os.Bundle;

import android.view.LayoutInflater;

import android.view.View;

import android.view.ViewGroup;

import android.widget.EditText;

public class LoginDialogFragment extends DialogFragment {

private EditText mUsername;

private EditText mPassword;

public interface LoginInputListener {

void onLoginInputComplete(String username, String password);

}

@Override

public Dialog onCreateDialog(Bundle savedInstanceState) {

final AlertDialog.Builder builder = new AlertDialog.Builder(getActivity());

// Get the layout inflater

final LayoutInflater inflater = getActivity().getLayoutInflater();

final View view = inflater.inflate(R.layout.fragment_login_dialog, null);

mUsername = (EditText) view.findViewById(R.id.id_txt_username);

mPassword = (EditText) view.findViewById(R.id.id_txt_password);

// Inflate and set the layout for the dialog

// Pass null as the parent view because its going in the dialog layout

builder.setView(view)

// Add action buttons

.setPositiveButton("Sign in",

new DialogInterface.OnClickListener() {

@Override

public void onClick(DialogInterface dialog, int id) {

final LoginInputListener listener = (LoginInputListener) getActivity();

listener.onLoginInputComplete(mUsername.getText().toString(), mPassword.getText().toString());

}

}).setNegativeButton("Cancel", null);

return builder.create();

}

拿到username和password的引用，在点击登录的时候，把activity强转为我们自定义的接口：LoginInputListener，然后将用户输入的数据返回。
MainActivity中需要实现我们的接口LoginInputListener，实现我们的方法，就可以实现当用户点击登陆时，获得我们的帐号密码了：

package com.example.zhy_dialogfragment;
 
import com.example.zhy_dialogfragment.LoginDialogFragment.LoginInputListener;
 
import android.app.Activity;
import android.app.AlertDialog;
import android.content.DialogInterface;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.widget.Toast;
 
public class MainActivity extends Activity implements LoginInputListener {
 
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
    }
 
    public void showLoginDialog(View view) {
        final LoginDialogFragment dialog = new LoginDialogFragment();
        dialog.show(getFragmentManager(), "loginDialog");
    }
 
    @Override
    public void onLoginInputComplete(String username, String password) {
        Toast.makeText(this, "帐号：" + username + ",  密码 :" + password,
				Toast.LENGTH_SHORT).show();
    }
}

package com.example.zhy_dialogfragment;

import com.example.zhy_dialogfragment.LoginDialogFragment.LoginInputListener;

import android.app.Activity;

import android.app.AlertDialog;

import android.content.DialogInterface;

import android.os.Bundle;

import android.view.LayoutInflater;

import android.view.View;

import android.widget.Toast;

public class MainActivity extends Activity implements LoginInputListener {

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

}

public void showLoginDialog(View view) {

final LoginDialogFragment dialog = new LoginDialogFragment();

dialog.show(getFragmentManager(), "loginDialog");

}

@Override

public void onLoginInputComplete(String username, String password) {

Toast.makeText(this, "帐号：" + username + ", 密码 :" + password,

Toast.LENGTH_SHORT).show();

}

效果：

DialogFragment做屏幕适配

我们希望，一个对话框在大屏幕上以对话框的形式展示，而小屏幕上则直接嵌入当前的Actvity中。这种效果的对话框，只能通过重写onCreateView实现。下面我们利用上面的EditNameDialogFragment来显示。

EditNameDialogFragment我们已经编写好了，直接在MainActivity中写调用

public void showDialogInDifferentScreen(View view) {
    final FragmentManager fragmentManager = getFragmentManager();
    final EditNameDialogFragment newFragment = new EditNameDialogFragment();
 
    final boolean mIsLargeLayout = getResources().getBoolean(R.bool.large_layout) ;
    Log.e("TAG", mIsLargeLayout+"");
    if (mIsLargeLayout ) {
        // The device is using a large layout, so show the fragment as a
        // dialog
        newFragment.show(fragmentManager, "dialog");
    } else {
        // The device is smaller, so show the fragment fullscreen
        final FragmentTransaction transaction = fragmentManager.beginTransaction();
        // For a little polish, specify a transition animation
        transaction.setTransition(FragmentTransaction.TRANSIT_FRAGMENT_OPEN);
        // To make it fullscreen, use the 'content' root view as the
        // container
        // for the fragment, which is always the root view for the activity
        transaction.replace(R.id.id_ly, newFragment).commit();
    }
}

public void showDialogInDifferentScreen(View view) {

final FragmentManager fragmentManager = getFragmentManager();

final EditNameDialogFragment newFragment = new EditNameDialogFragment();

final boolean mIsLargeLayout = getResources().getBoolean(R.bool.large_layout) ;

Log.e("TAG", mIsLargeLayout+"");

if (mIsLargeLayout ) {

// The device is using a large layout, so show the fragment as a

// dialog

newFragment.show(fragmentManager, "dialog");

} else {

// The device is smaller, so show the fragment fullscreen

final FragmentTransaction transaction = fragmentManager.beginTransaction();

// For a little polish, specify a transition animation

transaction.setTransition(FragmentTransaction.TRANSIT_FRAGMENT_OPEN);

// To make it fullscreen, use the 'content' root view as the

// container

// for the fragment, which is always the root view for the activity

transaction.replace(R.id.id_ly, newFragment).commit();

}

可以看到，我们通过读取R.bool.large_layout，然后根据得到的布尔值，如果是大屏幕则直接以对话框显示，如果是小屏幕则嵌入我们的Activity布局中
这个R.bool.large_layout是我们定义的资源文件：

在默认的values下新建一个bools.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
 
    <bool name="large_layout">false</bool>
 
</resources>

<?xml version="1.0" encoding="utf-8"?>

<bool name="large_layout">false</bool>

</resources>

然后在res下新建一个values-large，在values-large下再新建一个bools.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
 
    <bool name="large_layout">true</bool>
 
</resources>

<?xml version="1.0" encoding="utf-8"?>

</resources>

最后测试：

左边为模拟器，右边为我的手机~~~~~

屏幕旋转

当用户输入帐号密码时，忽然旋转了一下屏幕，帐号密码不见了~~~是不是会抓狂

传统的 new AlertDialog 在屏幕旋转时，第一不会保存用户输入的值，第二还会报异常，因为 Activity 销毁前不允许对话框未关闭。而通过 DialogFragment 实现的对话框则可以完全不必考虑旋转的问题。

我们直接把上面登录使用 AlertDialog 创建的登录框，拷贝到 MainActivity 中直接调用：

public void showLoginDialogWithoutFragment(View view) {
    final AlertDialog.Builder builder = new AlertDialog.Builder(this);
    // Get the layout inflater
    final LayoutInflater inflater = this.getLayoutInflater();
 
    // Inflate and set the layout for the dialog
    // Pass null as the parent view because its going in the dialog layout
    builder.setView(inflater.inflate(R.layout.fragment_login_dialog, null))
        // Add action buttons
        .setPositiveButton("Sign in",
            new DialogInterface.OnClickListener() {
                @Override
                public void onClick(DialogInterface dialog, int id) {
                    // sign in the user ...
                }
            }).setNegativeButton("Cancel", null).show();
    }

public void showLoginDialogWithoutFragment(View view) {

final AlertDialog.Builder builder = new AlertDialog.Builder(this);

// Get the layout inflater

final LayoutInflater inflater = this.getLayoutInflater();

// Inflate and set the layout for the dialog

// Pass null as the parent view because its going in the dialog layout

builder.setView(inflater.inflate(R.layout.fragment_login_dialog, null))

// Add action buttons

.setPositiveButton("Sign in",

new DialogInterface.OnClickListener() {

@Override

public void onClick(DialogInterface dialog, int id) {

// sign in the user ...

}

}).setNegativeButton("Cancel", null).show();

}

下面我分别点击两种方式创建的登录框，看效果图：

可以看到，传统的Dialog旋转屏幕时就消失了，且后台log会报异常~~~使用DialogFragment则不受影响。

2025 年 9 月
一	二	三	四	五	六	日
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28
29	30