也许你迷茫,但是我想说,在你迷茫的同时,保持本心,过好今天就好。
效果图如下:
程序运行根目录
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(),
);
}
默认显示的首页面
///默认加载显示的首页面
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(),
],
),
),
);
}
... ... 这里是相应的方法块
}
显示的一个背景图
buildFunction1() {
return Positioned.fill(
child: Image.asset(
"images/loginbg.png",
fit: BoxFit.fill,
),
);
}
高斯模糊
buildFunction2() {
return Positioned.fill(
child: BackdropFilter(
filter: ImageFilter.blur(sigmaX: 3, sigmaY: 3),
child: Container(
color: Colors.white.withOpacity(0.4),
),
),
);
}
登录输入层
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("登录"),
),
),
)
],
),
);
}
完毕
小编也写了几本书,如果你有兴趣可以去看看
手机点击查看 # 电脑点击查看手机点击查看 # 电脑点击查看
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)