Question

我可以问更多吗？如果我想创建一个应用程序，例如提醒我需要正确使用陀螺仪的传感器。

我需要在此代码中使用传感器，因此我将添加到此代码中。请帮我解决这个问题我是flutter的新手所以我需要使用三元运算符吗？

flutter 可以在 Container 或 padding 内设置状态吗？

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

class GameGuessWord extends StatefulWidget {
  @override
  _GameGuessWordState createState() => _GameGuessWordState();
}

class _GameGuessWordState extends State<GameGuessWord> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.indigo[900],
      body: Column(
        // mainAxisAlignment: MainAxisAlignment.center,
        crossAxisAlignment: CrossAxisAlignment.stretch,
        children: <Widget>[
          Container(
            margin: EdgeInsets.only(
                top: (MediaQuery.of(context).size.height) / 2 - 60),
            child: Text(
              'FootBall',
              textAlign: TextAlign.center,
              style: TextStyle(
                fontSize: 100,
                color: Colors.white,
              ),
            ),
          ),
          Container(
            margin:
                EdgeInsets.only(top: (MediaQuery.of(context).size.height / 8)),
            padding: EdgeInsets.all(10),
            child: Center(
              child: Container(
                padding: EdgeInsets.all(15),
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(30),
                  color: Colors.amber[700],
                ),
                child: Text(
                  '60',
                  style: TextStyle(fontSize: 20),
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }
}

这是这个页面的输出 enter image description here

Answer 1

你对一个项目有一个非常有趣的想法。我可以提供一些有关如何实施它的线索。

首先，使用sensor包，您可以通过3个BroadcastStream：accelerometerEvents、userAccelerometerEvents和gyroscopeEvents收听手机的方向.考虑到这一点，我们可以监听 x 中的更改（特别是 y、z 和 initState() 值），然后根据它们操作 UI。< /p>

为了更好地演示，我在这里提供了一个完整的工作示例，该示例通过首先将方向设置为 accelerometer（用于简单演示）来使用 Landscape 值更改应用程序的背景，然后收听z 值。您也可以操纵文本和其他值来创建 Heads Up！你自己的游戏！代码如下：

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

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  SystemChrome.setPreferredOrientations([
    DeviceOrientation.landscapeRight,
  ]);
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.indigo,
      ),
      home: GameGuessWord(),
    );
  }
}

class GameGuessWord extends StatefulWidget {
  @override
  _GameGuessWordState createState() => _GameGuessWordState();
}

class _GameGuessWordState extends State<GameGuessWord> {
  Color _backgroundColor = Colors.indigo;

  /// Upright: [-10, 0, 0]
  /// Tilt forward: [0, 0, -10]
  /// Tilt backward: [0, 0, 10]

  @override
  void initState() {
    super.initState();
    accelerometerEvents.listen((AccelerometerEvent event) {
      setState(() {
        // Manipulate the UI here, something like:
        if (event.z < -6) {
          _backgroundColor = Colors.green;
        } else if (event.z > 6) {
          _backgroundColor = Colors.red;
        } else {
          _backgroundColor = Colors.indigo;
        }
      });
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: _backgroundColor,
      body: Column(
        // mainAxisAlignment: MainAxisAlignment.center,
        crossAxisAlignment: CrossAxisAlignment.stretch,
        children: <Widget>[
          Container(
            margin: EdgeInsets.only(
                top: (MediaQuery.of(context).size.height) / 2 - 60),
            child: Text(
              'FootBall',
              textAlign: TextAlign.center,
              style: TextStyle(
                fontSize: 100,
                color: Colors.white,
              ),
            ),
          ),
          Container(
            margin:
                EdgeInsets.only(top: (MediaQuery.of(context).size.height / 8)),
            padding: EdgeInsets.all(10),
            child: Center(
              child: Container(
                padding: EdgeInsets.all(15),
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(30),
                  color: Colors.amber[700],
                ),
                child: Text(
                  '60',
                  style: TextStyle(fontSize: 20),
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }
}

如何更改不使用颤振中的按钮的状态以及颤振传感器的问题

1 个答案: