我可以问更多吗?如果我想创建一个应用程序,例如提醒我需要正确使用陀螺仪的传感器。
我需要在此代码中使用传感器,因此我将添加到此代码中。请帮我解决这个问题我是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
答案 0 :(得分:0)
你对一个项目有一个非常有趣的想法。我可以提供一些有关如何实施它的线索。
首先,使用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),
),
),
),
),
],
),
);
}
}