【发布时间】：2021-12-16 22:58:25
【问题描述】：
我是 Flutter 新手，谁能帮我了解如何使用 Flutter 实现屏幕截图所示的屏幕设计。
以下是我到目前为止所取得的代码：
Container(
padding: EdgeInsets.all(16.0),
child: Row(
children: [
Container(
width: 50.0,
height: 48.0,
child: Padding(
padding: const EdgeInsets.only(left: 5, right: 5),
child: TextField(
style: TextStyle(
fontSize: 10.0,
fontWeight: FontWeight.bold,
color: Colors.black,
),
autocorrect: true,
decoration: InputDecoration(
hintStyle: TextStyle(color: Colors.grey),
fillColor: Colors.white70,
focusedBorder: OutlineInputBorder(
borderRadius:
BorderRadius.all(Radius.circular(10.0)),
borderSide: BorderSide(color: Colors.greenAccent),
),
),
)),
),
Container(
width: 50.0,
height: 48.0,
child: Padding(
padding: const EdgeInsets.only(left: 5, right: 5),
child: TextField(
style: TextStyle(
fontSize: 10.0,
color: Colors.black,
),
autocorrect: true,
decoration: InputDecoration(
hintStyle: TextStyle(color: Colors.grey),
fillColor: Colors.white70,
focusedBorder: OutlineInputBorder(
borderRadius:
BorderRadius.all(Radius.circular(10.0)),
borderSide: BorderSide(color: Colors.greenAccent),
),
),
)),
),
Container(
width: 50.0,
height: 48.0,
child: Padding(
padding: const EdgeInsets.only(left: 5, right: 5),
child: TextField(
style: TextStyle(
fontSize: 10.0,
color: Colors.black,
),
autocorrect: true,
decoration: InputDecoration(
hintStyle: TextStyle(color: Colors.grey),
fillColor: Colors.white70,
focusedBorder: OutlineInputBorder(
borderRadius:
BorderRadius.all(Radius.circular(10.0)),
borderSide: BorderSide(color: Colors.greenAccent),
),
),
)),
),
Container(
width: 50.0,
height: 48.0,
child: Padding(
padding: const EdgeInsets.only(left: 5, right: 5),
child: TextField(
style: TextStyle(
fontSize: 10.0,
color: Colors.black,
),
autocorrect: true,
decoration: InputDecoration(
hintStyle: TextStyle(color: Colors.grey),
fillColor: Colors.white70,
focusedBorder: OutlineInputBorder(
borderRadius:
BorderRadius.all(Radius.circular(10.0)),
borderSide: BorderSide(color: Colors.greenAccent),
),
),
)),
),
Container(
width: 50.0,
height: 48.0,
child: Padding(
padding: const EdgeInsets.only(left: 5, right: 5),
child: TextField(
style: TextStyle(
fontSize: 10.0,
color: Colors.black,
),
autocorrect: true,
decoration: InputDecoration(
hintStyle: TextStyle(color: Colors.grey),
fillColor: Colors.white70,
focusedBorder: OutlineInputBorder(
borderRadius:
BorderRadius.all(Radius.circular(10.0)),
borderSide: BorderSide(color: Colors.greenAccent),
),
),
)),
),
Container(
width: 50.0,
height: 48.0,
child: Padding(
padding: const EdgeInsets.only(left: 5, right: 5),
child: TextField(
style: TextStyle(
fontSize: 10.0,
color: Colors.black,
),
autocorrect: true,
decoration: InputDecoration(
hintStyle: TextStyle(color: Colors.grey),
fillColor: Colors.white70,
focusedBorder: OutlineInputBorder(
borderRadius:
BorderRadius.all(Radius.circular(10.0)),
borderSide: BorderSide(color: Colors.greenAccent),
),
),
)),
),
],
),
),
【问题讨论】：
-
您能否更清楚地了解您想要实现的目标？
-
这应该是密码输入字段吗？如果是这样，请提供更好的图像。
-
更新了图片