Tal vez estés confundido, pero quiero decirte que mientras estés confundido, mantén tu corazón y vive un buen día.
El diagrama de efectos es el siguiente:
Programa que ejecuta el directorio raíz
import 'dart:ui';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
/// 根目录 Activity ViewController
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return const MaterialApp(
home: MyHomePage(),
);
}
Página de inicio mostrada por defecto
///默认加载显示的首页面
class MyHomePage extends StatefulWidget {
const MyHomePage({
Key? key}) : super(key: key);
@override
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
///用户名使用
late final TextEditingController _nameController = TextEditingController();
///密码输入框使用
late final TextEditingController _passwordController =
TextEditingController();
@override
Widget build(BuildContext context) {
return Scaffold(
body: Container(
width: double.infinity,
height: double.infinity,
child: Stack(
children: [
//第一层 背景图片
buildFunction1(),
//第二层 高斯模糊
buildFunction2(),
//第三层 登录输入层
buildFunction3(),
],
),
),
);
}
... ... 这里是相应的方法块
}
se muestra una imagen de fondo
buildFunction1() {
return Positioned.fill(
child: Image.asset(
"images/loginbg.png",
fit: BoxFit.fill,
),
);
}
desenfoque gaussiano
buildFunction2() {
return Positioned.fill(
child: BackdropFilter(
filter: ImageFilter.blur(sigmaX: 3, sigmaY: 3),
child: Container(
color: Colors.white.withOpacity(0.4),
),
),
);
}
capa de entrada de inicio de sesión
buildFunction3() {
return Positioned.fill(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
SizedBox(
width: 300,
child: TextField(
controller: _nameController,
decoration: const InputDecoration(
hintText: "请输入用户名",
border: OutlineInputBorder(
borderRadius: BorderRadius.all(Radius.circular(33)),
borderSide: BorderSide(
color: Colors.grey,
),
),
),
),
),
const SizedBox(height: 20),
SizedBox(
width: 300,
child: TextField(
controller: _passwordController,
decoration: const InputDecoration(
hintText: "请输入密码",
border: OutlineInputBorder(
borderRadius: BorderRadius.all(Radius.circular(33)),
borderSide: BorderSide(
color: Colors.grey,
),
),
),
),
),
const SizedBox(height: 40),
SizedBox(
width: 300,
height: 48,
child: ClipRRect(
borderRadius: const BorderRadius.all(Radius.circular(33)),
child: ElevatedButton(
onPressed: () {
String name = _nameController.text;
String password = _passwordController.text;
print("获取到的内容是 $name $password");
},
child: const Text("登录"),
),
),
)
],
),
);
}
completo
También escribí algunos libros, si estás interesado, puedes leerlos.
