Flutter实战小案例

(实战)点不到的按钮

// 主要实现效果类
class _MyHomePageState extends State {
  // 1.定义要使用的变量
  double btnLeft = 0;
  double btnTop = 0;
  int timeDuration = 500;
  String textButton = "点我呀";
  // 2.获得当前设备屏幕尺⼨，需要import 'dart:ui'
  var s = window.physicalSize / window.devicePixelRatio;
  // 3.新建⼀个随机对象，import 'dart:math';
  var rng = new Random()
  // 4.初始化init变量的值  
  @override
  void initState() {
    randomPosition();
    super.initState();
  }
  // 5.随机变化left和top的值
  randomPosition() {
    setState(() {
      btnLeft = rng.nextDouble() * (s.width - 100);
      btnTop = rng.nextDouble() * (s.height - 40);
    });
  }
 // 6.widgets渲染
  @override
  Widget build(BuildContext context) {
    return Stack(
      children: [
        AnimatedPositioned(
            duration: Duration(milliseconds: timeDuration),
            left: btnLeft,
            top: btnTop,
            width: 100,
            height: 40,
            child: ElevatedButton(
              onPressed: randomPosition,
              child: Text(textButton),
            ))
      ],
    );
  }
}

（实战）点不到的按钮修改

• 修改按钮的宽200和⾼80
• 设置背景⾊ rgb 值为 136, 138, 226
• 按钮文本颜⾊设置为黑⾊
• 文本设置为：初次见面

  class MyHomePage extends StatefulWidget {
    const MyHomePage({Key? key, required this.title}) : super(key: key);
    final String title;
    @override
    State createState() => _MyHomePageState();
  }
  class _MyHomePageState extends State {
    double btnLeft = 0;
    double btnTop = 0;
    int timeDuration = 500;
    String textButton = "初次见面";
    var s = window.physicalSize / window.devicePixelRatio;
    var rng = Random();
    // 创建背景颜色对象
    var backColor = const BoxDecoration(color: Color.fromRGBO(136, 138, 226, 1));
    @override
    void initState() {
      randomPosition();
      super.initState();
    }
    randomPosition() {
      setState(() {
        btnLeft = Random().nextDouble() * (s.width - 100);
        btnTop = Random().nextDouble() * (s.height - 40);
      });
    }
    @override
    Widget build(BuildContext context) {
      return Container(
        decoration: backColor,
        child: Stack(
          children: [
            Positioned(
                left: btnLeft,
                top: btnTop,
                width: 200,
                height: 80,
                child: ElevatedButton(
                  onPressed: randomPosition,
                  child: Text(
                    textButton,
                    // 修改文本颜色
                    style: const TextStyle(
                      color: Colors.black,
                    ),
                  ),
                )),
          ],
        ),
      );
    }
  }
  

  
  （图片来源网络，侵删）