timg.jpeg
1.Text文本
注釋出經(jīng)常使用的幾個(gè)屬性
const Text(
this.data, {
Key key,
this.style, //樣式
this.strutStyle,
this.textAlign, //對(duì)其方式
this.textDirection,
this.locale,
this.softWrap,
this.overflow, //超出的部分是否顯示，枚舉
this.textScaleFactor,
this.maxLines, //最大的顯示的行數(shù)
this.semanticsLabel,
this.textWidthBasis,
})
富文本 是
Text.rich()參數(shù)是TextSpan
經(jīng)常使用：
TextSpanWidgetSpan
image
import 'package:flutter/material.dart';
//main函數(shù)入口
main() => runApp(MyApp());
//MyApp類
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home:JCHomePage() ,
);
}
}
//創(chuàng)建一個(gè)JCHomePage的widget類
class JCHomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
// TODO: implement build
return Scaffold(
appBar: AppBar(
title: Text("StatefulWidget的認(rèn)知"),
),
body: JCHomeContent(),
);
}
}
//創(chuàng)建一個(gè) JCHomeContent繼承StatefulWidget
class JCHomeContent extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Column(
// mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
"這個(gè)是一個(gè)文本Text暑认，不負(fù)偉大時(shí)代草戈，常使用的widget(Text文本,Button)",
style: TextStyle(
fontSize: 20,
color: Colors.black38,
backgroundColor: Colors.yellow,
),
// maxLines: 1, //最大行數(shù)
//超出的部分顯示秸妥。批什。屠凶。
// overflow: TextOverflow.ellipsis,
// 所有內(nèi)容都居中對(duì)齊
textAlign: TextAlign.center,
),
//富文本
Text.rich(
TextSpan(
children: [
TextSpan(
text: "哈哈哈哈哈 ",
style: TextStyle(
fontSize: 18,
color: Colors.blue
),
),
TextSpan(
text: "這是什么情況",
style: TextStyle(
fontSize: 18,
color: Colors.green
),
),
WidgetSpan(child: Icon(Icons.favorite, color: Colors.red,)),
TextSpan(
text: "哈哈的動(dòng)態(tài)",
style: TextStyle(
fontSize: 18,
color: Colors.red
),
),
]
),
),
],
);
}
}
2.按鈕
在Flutter中 按鈕的組件有很多種
FlatButton按鈕RaisedButton按鈕OutlineButton按鈕FloatingActionButton懸浮按鈕
這幾個(gè)按鈕的區(qū)別其實(shí)就是樣式不一樣- 可以根據(jù)需要
自己定義按鈕
import 'package:flutter/material.dart';
//main函數(shù)入口
main() => runApp(MyApp());
//MyApp類
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: JCHomePage(),
);
}
}
//創(chuàng)建一個(gè)JCHomePage的widget類
class JCHomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
//Scaffold腳手架窜护，類似控制器ViewController
return Scaffold(
appBar: AppBar(
title: Text("StatefulWidget的認(rèn)知"),
),
body: JCHomeContent(),
);
}
}
//創(chuàng)建一個(gè) JCHomeContent繼承StatefulWidget
class JCHomeContent extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
//RaisedButton按鈕
RaisedButton(
textTheme:ButtonTextTheme.accent ,
//設(shè)置按鈕的子控件
child: Text(
"這是一個(gè)RaisedButton按鈕",
style: TextStyle(
// color: Colors.green,
),
),
textColor: Colors.red,
//按鈕事件
onPressed: () {
print("點(diǎn)擊RaisedButton按鈕了");
}),
//FlatButton按鈕
FlatButton(
onPressed: (){
},
child: Text(
"FlatButton按鈕"
)
),
OutlineButton(
child: Text("OutlineButton"),
onPressed: () {
print("OutlineButton Click");
},
),
//自定義按鈕I
FlatButton(
shape: RoundedRectangleBorder(
//邊框
side: BorderSide(),
//圓角
borderRadius: BorderRadius.circular(5.0),
),
onPressed: (){
print("自定義按鈕");
},
child: Row(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Icon(Icons.favorite,color: Colors.green,),
SizedBox(width: 5,),
Text("這是一個(gè)自定義按鈕",)
],
),
),
],
);
}
}
image
3.Button組件中的注意點(diǎn)
button默認(rèn)有88 * 36 的值button的內(nèi)邊距
我們?cè)?code>FlatButton或者RaisedButton的父類中可以看到一些端倪
image.png
我們?cè)谟^察一下
MaterialButton重寫的build可以知道睡腿，button是從上下文context獲取的數(shù)據(jù)
image.png
然后通過
ButtonTheme這個(gè)類，進(jìn)去可以看到button組件默認(rèn)是有一個(gè)寬度和告訴的
image.png
//1.修改button默認(rèn)的間距
//2.button默認(rèn)有88 * 36 的值
//3.button的內(nèi)邊距
Column changButtonMargin() {
return Column(
children: <Widget>[
//button默認(rèn)上下是有一定的間距
FlatButton(
//按鈕默認(rèn)是有48 * 48px 的高度和寬度逗宁，不足48就會(huì)默認(rèn)是48
materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
child: Text("這是一個(gè)按鈕"),
color: Colors.red,
onPressed: () {},
//修改內(nèi)邊距
padding: EdgeInsets.all(0),
),
//通過ButtonTheme包裹 定義RaisedButton的寬度和高度
ButtonTheme(
//設(shè)置最小的寬度
minWidth: 30,
//設(shè)置高度
height: 30,
child: RaisedButton(color: Colors.red, onPressed: () {}),
),
],
);
}
按鈕的注意點(diǎn)
