flutter设置导航栏顶部标题与组件Text和Center和Container详解

flutter设置导航栏顶部标题与组件Text和Center和Container详解⽆状态组件和有状态组件的介绍
StatelessWidget 是⽆状态组件，状态是不可以改变的
StatefulWidget 是有状态组件持有的状态可能在 widge ⽣命周期中改变
StatelessWidget 是⼀个抽象类，只要是抽象类，我们就要实现抽象类⾥⾯的抽象⽅法
1快速修复
class MyApp extends StatelessWidget{
}
会报错我们选择快速修复
然后选择第⼀个 create 1 misssxxx 实现抽象类⾥⾯的抽象⽅法
class MyApp extends StatelessWidget{
@override
Widget build(BuildContext context) {
// TODO: implement build
throw UnimplementedError();
}
}
build ⽅法会返回⼀个 Widget(组件)；
在 flutter 中所有的都是组件
Text， Center 也是⼀个组件
2 center组件实现全屏上下左右居中
import 'package:flutter/material.dart';
void main() {
runApp(new MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new Center(
child: new Text(
'中⽂',
textDirection: TextDirection.ltr,
));
}
}
3设置Text 的⽂本字体颜⾊⼤⼩
⽂本的样式需要再TextStyle下去设置
style: TextStyle(
fontSize: 40.0, //数字必须是Double类型的
// 设置字体的颜⾊
color: Color.fromARGB(200, 100, 100, 8)
)
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new Center(
// 设置Text的⽂本字体
child: new Text(
'你好Flutter,我开始学习你了',
textDirection: TextDirection.ltr,
// 设置字体的颜⾊
style: TextStyle(
fontSize: 40.0, //数字必须是Double类型的
// 设置字体的颜⾊
color: Color.fromARGB(200, 100, 100, 8)),
));
}
}
3 MaterialApp
MaterialApp 是⼀个⽅便的 WiDget;
它封装了应⽤程序实现的 Material Design 所需要的⼀些 Widget
它⼀般作为顶层的组件使⽤
4 使⽤MaterialApp设置导航栏顶部标题
import 'package:flutter/material.dart';
void main() {
runApp(new MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
// 设置顶部的标题
home: Scaffold(appBar: AppBar(title: Text('⾸页')), body: MyCont()),
//设置顶部的颜⾊
theme: ThemeData(primarySwatch: Colors.yellow),
);
}
}
class MyCont extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new Center(
child: new Text(
'你好Flutter,我开始学习你了',
textDirection: TextDirection.ltr,
// 设置字体的颜⾊
style: TextStyle(
fontSize: 40.0, //数字必须是Double类型的
// 设置字体的颜⾊
color: Color.fromARGB(200, 100, 100, 8)),
));
}
}
4 Scaffold
Scaffold 是 Material Design 布局结构的基本实现
这个类⽤于显⽰ drawer snackbar 和底部 sheet 的 api
5 简写
void main(){
runApp(MyApp())
}
void main()=> runApp(MyApp())
Container 组件详解
Container 是⼀个容器，类似于 div;
Container 是⼀个类，继承了 StatelessWidget
容器下⾯放置了⼀个⽂本；⽂本有宽⾼，背景颜⾊，边框线
class MyCont extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new Center(
child: Container(
child: Text('我开始学习你了'),
width: 750.0, // 都是double类型的，你可以去查看他的属性
height: 50.0,
decoration: BoxDecoration(
//背景颜⾊
color: Colors.yellow,
// 边框颜⾊,边框线
border: Border.all(color: Colors.blue, width: 2.0)),
));
}
}
class MyCont extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Container(
// Text的内容
child: Text('我开始学习你了我开始学习你了我开始学习你了我开始学习你了我开始学习你了', textAlign: TextAlign.right, //⽂字右对齐
overflow: TextOverflow.ellipsis, //超出显⽰省略号
//设置⽂本的样式
style: TextStyle(
fontSize: 20.0,
color: Color.fromARGB(255, 255, 255, 203),
fontStyle: FontStyle.italic, //倾斜
letterSpacing: 2.0)
),
// Container的设置
width: 750.0,
height: 150.0,
decoration: BoxDecoration(
//背景颜⾊
color: Color.fromARGB(255, 192, 213, 1),
// 边框颜⾊,边框线
border: Border.all(color: Colors.blue, width: 2.0),
//设置圆⾓
borderRadius: BorderRadius.all(Radius.circular(10)) ),
// 设置padding 为20
// padding:EdgeInsets.all(20),
// 分别表⽰左上右下
padding: EdgeInsets.fromLTRB(20, 30, 50, 10),
//底部左对齐
alignment: Alignment.bottomLeft,
);
}
}。