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,
);
}
}
flutter设置导航栏顶部标题与组件Text和Center和Container详解的更多相关文章
- IOS 设置导航栏
//设置导航栏的标题 self.navigationItem setTitle:@"我的标题"; //设置导航条标题属性:字体大小/字体颜色…… /*设置头的属性:setTitle ...
- 【转】iOS中设置导航栏标题的字体颜色和大小
原文网址:http://www.360doc.com/content/15/0417/11/20919452_463847404.shtml iOS中设置导航栏标题的字体颜色和大小,有需要的朋友可以参 ...
- iOS中设置导航栏标题的字体颜色和大小
iOS中设置导航栏标题的字体颜色和大小,有需要的朋友可以参考下. 在平时开发项目的时候,难免会遇到修改导航栏字体大小和颜色的需求,一般使用自定义视图的方法,其实还存在一种方法. 方法一:(自定义视图的 ...
- 设置导航栏nav全透明
设置导航栏nav全透明 p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 14.0px Menlo; color: #ffffff } span.s1 { } ...
- wordpress设置导航栏
设置导航栏,首先你要设置你的导航分类.登陆后台---文章---分类目录,首先在这里输入你要写入导航的标题. 设置好后点击---外观---菜单这个地方就可以具体的设置导航的排序和下拉等二级
- iOS设置导航栏样式(UINavigationController)
//设置导航栏baritem和返回baiitem样式 UIBarButtonItem *barItem = [UIBarButtonItem appearance]; //去掉返回按钮上的字 [bar ...
- IOS开发中设置导航栏主题
/** * 系统在第一次使用这个类的时候调用(1个类只会调用一次) */ + (void)initialize { // 设置导航栏主题 UINavigationBar *navBar = [UINa ...
- 美团HD(2)-设置导航栏内容
DJHomeViewController.m #import "DJHomeViewController.h" #import "DJConstantValue.h&qu ...
- IOS 设置导航栏全局样式
// 1.设置导航栏背景 UINavigationBar *bar = [UINavigationBar appearance]; [bar setBackgroundImage:[UIImage r ...
- iOS不得姐项目--appearance的妙用,再一次设置导航栏返回按钮,导航栏左右按钮的封装(巧用分类)
一.UI_APPEARANCE_SELECTOR 彩票项目中appearance的用法一直没有搞明白,这次通过第二个项目中老师的讲解,更深一层次的了解到了很多关于appearance的作用以及使用方法 ...
随机推荐
- tcp全连接满了怎么处理
cat /proc/sys/net/ipv4/tcp_max_syn_backlog #syn队列最大长度 netstat -ntl | grep SYN_RECV | wc -l #syn队列当前长 ...
- 三、FreeRTOS学习笔记-系统配置
FreeRTOSConfig.h配置文件作用:对FreeRTOS进行功能配置和裁剪,以及API函数的使能. 系统配置文件中主要是一些宏定义 相关宏定义可分为三类: 1."INCLUDE&qu ...
- Codeforces Round 890 (Div. 2)
Tales of a Sort 题解 找到最大的能够产生逆序对的数即可 暴力\(O(n^2)\)枚举即可 const int N = 2e5 + 10, M = 4e5 + 10; int n; in ...
- Mybatis【4】-- 关于Mybatis别名定义
代码直接放在Github仓库[https://github.com/Damaer/Mybatis-Learning ],可直接运行,就不占篇幅了. 我们下面需要改进的是别名,也趁这个机会介绍一下别名的 ...
- qiankun 的 CSS 沙箱隔离机制
为什么需要CSS沙箱 在 qiankun 微前端框架中,由于每个子应用的开发和部署都是独立的,将主/子应用的资源整合到一起时,容易出现样式冲突的问题 因此,需要 CSS 沙箱来解决样式冲突问题,实现主 ...
- fastadmin表格 - 自定义接口
1.文本过长溢出 文本超过250px则隐藏,如果需要修改此宽度,请在具体页面中重新定义formatter方法 点击通过弹窗展示完整的内容 弹窗插件使用Layer.js 调用方法 {field: 'co ...
- elementui多选框部分禁用
直接上代码 <el-table-column type="selection" :selectable="selectable" align=" ...
- python读取pdf
1. vscode 安装python插件 2. vscode 终端安装pdfminer.six , pdfplumber python -m pip install pdfminer.six pyth ...
- 04C++顺序结构(3)
一.设置域宽setw() 教学视频1 输出的内容所占的总宽度成为域宽,有些高级语言中称为场宽.使用setw()前,必须包含头文件iomanip,即#include.头文件iomanip,用来声明一些& ...
- Nuget Reference 丢失问题
现象 在 Visual Studio 2017 中创建一个控制台项目.创建出来的项目如下所示. 通过 NuGet 管理器,添加 Newtonsoft.Json 的 NuGet 包,安装之后,项目中添加 ...