Flutter实战小案例

(实战)点不到的按钮

dart 复制代码

// 主要实现效果类
class _MyHomePageState extends State<MyHomePage> {
  // 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
按钮文本颜⾊设置为黑⾊
文本设置为：初次见面

dart 复制代码

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

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

class _MyHomePageState extends State<MyHomePage> {
  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,
                  ),
                ),
              )),
        ],
      ),
    );
  }
}