我们在使用一个软件或者APP时，肯定会接触登录界面。只有我们登录系统成功后才能使用软件的功能，所以这期我们来实现一个登录界面。
这个项目中用到的容器、组件有 Material风格的基本布局结构Scaffold()、单容器控件Container()、水平容器控件Row()、竖直容器控件Column()、Padding组件Padding()、居中控件Center()、 弹性控件Expanded()、分隔控件Divider()、圆形头像控件CircleAvatar()、按钮MaterialButton()、基本文本控件Text()、输入框控件TextField()。
Scaffold控件
const Scaffold({
Key? key,
this.appBar,
this.body,
this.floatingActionButton,
this.floatingActionButtonLocation,
this.floatingActionButtonAnimator,
this.persistentFooterButtons,
this.drawer,
this.onDrawerChanged,
this.endDrawer,
this.onEndDrawerChanged,
this.bottomNavigationBar,
this.bottomSheet,
this.backgroundColor,
this.resizeToAvoidBottomInset,
this.primary = true,
this.drawerDragStartBehavior = DragStartBehavior.start,
this.extendBody = false,
this.extendBodyBehindAppBar = false,
this.drawerScrimColor,
this.drawerEdgeDragWidth,
this.drawerEnableOpenDragGesture = true,
this.endDrawerEnableOpenDragGesture = true,
this.restorationId,
})
Container控件
Container({
Key? key,
this.alignment,
this.padding,
this.color,
this.decoration,
this.foregroundDecoration,
double? width,
double? height,
BoxConstraints? constraints,
this.margin,
this.transform,
this.transformAlignment,
this.child,
this.clipBehavior = Clip.none,
})
Row控件
Row({
Key? key,
MainAxisAlignment mainAxisAlignment = MainAxisAlignment.start,
MainAxisSize mainAxisSize = MainAxisSize.max,
CrossAxisAlignment crossAxisAlignment = CrossAxisAlignment.center,
TextDirection? textDirection,
VerticalDirection verticalDirection = VerticalDirection.down,
TextBaseline? textBaseline, // NO DEFAULT: we don't know what the text's baseline should be
List children = const [],
})
Column控件
Column({
Key? key,
MainAxisAlignment mainAxisAlignment = MainAxisAlignment.start,
MainAxisSize mainAxisSize = MainAxisSize.max,
CrossAxisAlignment crossAxisAlignment = CrossAxisAlignment.center,
TextDirection? textDirection,
VerticalDirection verticalDirection = VerticalDirection.down,
TextBaseline? textBaseline,
List children = const [],
})
Padding控件
const Padding({
Key? key,
required this.padding,
Widget? child,
})
Center控件
const Center({ Key? key, double? widthFactor, double? heightFactor, Widget? child })
Expanded控件
const Expanded({
Key? key,
int flex = 1,
required Widget child,
})
Divider控件
const Divider({
Key? key,
this.height,
this.thickness,
this.indent,
this.endIndent,
this.color,
})
CircleAvatar控件
const CircleAvatar({
Key? key,
this.child,
this.backgroundColor,
this.backgroundImage,
this.foregroundImage,
this.onBackgroundImageError,
this.onForegroundImageError,
this.foregroundColor,
this.radius,
this.minRadius,
this.maxRadius,
})
MaterialButton控件
const MaterialButton({
Key? key,
required this.onPressed,
this.onLongPress,
this.onHighlightChanged,
this.mouseCursor,
this.textTheme,
this.textColor,
this.disabledTextColor,
this.color,
this.disabledColor,
this.focusColor,
this.hoverColor,
this.highlightColor,
this.splashColor,
this.colorBrightness,
this.elevation,
this.focusElevation,
this.hoverElevation,
this.highlightElevation,
this.disabledElevation,
this.padding,
this.visualDensity,
this.shape,
this.clipBehavior = Clip.none,
this.focusNode,
this.autofocus = false,
this.materialTapTargetSize,
this.animationDuration,
this.minWidth,
this.height,
this.enableFeedback = true,
this.child,
})
Text控件
const Text(
String this.data, {
Key? key,
this.style,
this.strutStyle,
this.textAlign,
this.textDirection,
this.locale,
this.softWrap,
this.overflow,
this.textScaleFactor,
this.maxLines,
this.semanticsLabel,
this.textWidthBasis,
this.textHeightBehavior,
})
TextField控件
const TextField({
Key? key,
this.controller,
this.focusNode,
this.decoration = const InputDecoration(),
TextInputType? keyboardType,
this.textInputAction,
this.textCapitalization = TextCapitalization.none,
this.style,
this.strutStyle,
this.textAlign = TextAlign.start,
this.textAlignVertical,
this.textDirection,
this.readOnly = false,
ToolbarOptions? toolbarOptions,
this.showCursor,
this.autofocus = false,
this.obscuringCharacter = '•',
this.obscureText = false,
this.autocorrect = true,
SmartDashesType? smartDashesType,
SmartQuotesType? smartQuotesType,
this.enableSuggestions = true,
this.maxLines = 1,
this.minLines,
this.expands = false,
this.maxLength,
@Deprecated(
'Use maxLengthEnforcement parameter which provides more specific '
'behavior related to the maxLength limit. '
'This feature was deprecated after v1.25.0-5.0.pre.',)
this.maxLengthEnforced = true,
this.maxLengthEnforcement,
this.onChanged,
this.onEditingComplete,
this.onSubmitted,
this.onAppPrivateCommand,
this.inputFormatters,
this.enabled,
this.cursorWidth = 2.0,
this.cursorHeight,
this.cursorRadius,
this.cursorColor,
this.selectionHeightStyle = ui.BoxHeightStyle.tight,
this.selectionWidthStyle = ui.BoxWidthStyle.tight,
this.keyboardAppearance,
this.scrollPadding = const EdgeInsets.all(20.0),
this.dragStartBehavior = DragStartBehavior.start,
this.enableInteractiveSelection = true,
this.selectionControls,
this.onTap,
this.mouseCursor,
this.buildCounter,
this.scrollController,
this.scrollPhysics,
this.autofillHints,
this.restorationId,
})
1.新建一个 Flutter 项目，项目命名为: LoginUI_demo 。
2.在新建的项目文件夹中找到【lib】文件夹，然后在里面开始编写代码。
自定义组件：
Widget TextBlock(){
return Padding(
padding: EdgeInsets.fromLTRB(0, 40, 0, 0),
child: Text(
'Sign in',
style: TextStyle(
fontSize: 32,
fontWeight: FontWeight.bold,
),
),
);
}
Widget TextBlock2(){
return Center(
child: Padding(
padding: EdgeInsets.fromLTRB(0, 39, 0, 0),
child: Text(
'···',
style: TextStyle(
fontSize: 15,
color: Colors.cyanAccent,
),
),
),
);
}
Widget TextBlock3(){
return Padding(
padding: EdgeInsets.fromLTRB(30, 50, 0, 0),
child: Text(
'···',
style: TextStyle(
fontSize: 18,
color: Colors.pinkAccent,
),
),
);
}
Widget DividerText(){
return Center(
//padding: EdgeInsets.fromLTRB(0, 40, 0, 0),
child: Text(
'其他登录方式',
style: TextStyle(
color: Colors.blueGrey[500],
fontSize: 15,
fontWeight: FontWeight.bold,
),
),
);
}
Widget CircleAvatarImage(){
return Padding(
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
Padding(
padding: EdgeInsets.fromLTRB(18, 10, 0, 0),
child: CircleAvatar(
radius: 12,
backgroundColor: Colors.white,
backgroundImage: AssetImage('images/wechat.png'),
),
),
Padding(
padding: EdgeInsets.fromLTRB(18, 10, 0, 0),
child: CircleAvatar(
radius: 12,
backgroundColor: Colors.white,
backgroundImage: AssetImage('images/zhihu.png'),
),
),
Padding(
padding: EdgeInsets.fromLTRB(18, 10, 0, 0),
child: CircleAvatar(
radius: 12,
backgroundColor: Colors.white,
backgroundImage: AssetImage('images/QQ.png'),
),
),
Padding(
padding: EdgeInsets.fromLTRB(18, 10, 0, 0),
child: CircleAvatar(
radius: 12,
backgroundColor: Colors.white,
backgroundImage: AssetImage('images/baidu.png'),
),
),
Padding(
padding: EdgeInsets.fromLTRB(20, 10, 0, 0),
child: CircleAvatar(
radius: 12,
backgroundColor: Colors.white,//背景颜色设置为白色
backgroundImage: AssetImage('images/github.png'),
),
),
],
),
);
}
两个按钮
Row(
children: [
MaterialButton(
textColor: Colors.white, //文本的颜色
minWidth: 88, //最小的宽度,默认是 88
height: 37, // Button 高度,默认是 36
onPressed: () {},
child: const Text("注册"), //显示的文字
),
MaterialButton(
color: CupertinoColors.link, //按钮颜色
textColor: Colors.white, //文本的颜色
minWidth: 108, //最小的宽度,默认是 88
child: Text(
"登录",
style: TextStyle(
fontSize: 18,
),
), //显示的文字
),
],
),
两个输入框
Column(
children: <Widget>[
Padding(
padding: const EdgeInsets.fromLTRB(0, 20, 0, 0), //上边部分填充
child: TextField(
style: TextStyle(fontSize: 12, color: Colors.black87), //文字大小、颜色
decoration: InputDecoration(
filled: true, //必须设置为true，fillColor才有效
fillColor: Colors.grey[80], //背景颜色
hintText: "邮箱或手机号",
///设置输入框可编辑时的边框样式
enabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(20.0), //输入框圆角
borderSide: BorderSide(), //输入框白色隐藏
),
),
),
),
Padding(
//设置内边距
padding: const EdgeInsets.fromLTRB(0, 20, 0, 0),
child: TextField(
obscureText: true,
style: TextStyle(fontSize: 12, color: Colors.black87), //文字大小、颜色
decoration: InputDecoration(
filled: true, //必须设置为true，fillColor才有效
fillColor: Colors.grey[80], //背景颜色
hintText: "密码",
///设置输入框可编辑时的边框样式
enabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(20.0), //输入框圆角
borderSide: BorderSide() //输入框白色隐藏
),
),
),
),
],
),
右侧布局代码
class RightWidget extends StatelessWidget {
const RightWidget({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
//填充布局
return Padding(
//四周填充10
padding: EdgeInsets.fromLTRB(80, 10, 0,20),
//垂直布局
child: Column(
children: <Widget>[
TextBlock(),
TextBlock2(),
InputField(),
ButtonBlock(),
Padding(
child: Divider(thickness: 1,indent: 2,color: Colors.blueGrey[300],),
),
DividerText(),
CircleAvatarImage(),
TextBlock3(),
],
),
);
}
}
总体布局代码
Scaffold(
body: Center(
//水平布局
child: Row(
//子组件
children: [
//Expanded 组件
Expanded(
//左侧空间占比
flex: 3,
//左侧布局
child: LeftImage(),
),
Expanded(
//右侧空间占比
flex: 5,
//右侧布局
child: RightWidget(),
),
],
),
),
);
检查项目中程序代码是否有错误，有需要按照提示改正，没有直接配置主运行文件 main.dart 。
运行主文件 main.dart ，观察界面效果。
