void main(){
runApp(App());
}
class App extends StatelessWidget{
Widget build(BuildContext context){
return MaterialApp(
home:Home()
)
)
}
class Home extends StatelessWidget{
Widget _itemForRow(BuildContext context,int index){
//return Text(datas[index].name!); 显示文字
//显示图片
return Container(
color:Colors.white,
margin:const EdeInsets.all(10),
//child:Image.network(datas[index].imageUrl)
child:Column(
children:<Widget>[
Image.network(datas[index].imageUrl!),
Text("hello")
]
)
)
}
Widget build(BuildContext context){
return Scaffold(
//app 的顶部
appBar:AppBar(
title:const Text("app name")
),
body:ListView.builder(
itemBuilder:_itemForRow,
itemCount:datas.length,
)
)
}
}
final List<Car> datas=[
const Car(
name:"保时捷",
imageUrl:"https://img.path.com/img.jpg"
)
]
class Car{
Car(this.name,this.imageUrl);
final string name!;
final string imageUrl!;
}
MeterialApp
Scaffold
AppBar 属性 centerTitle：true 使文本居中
child:PopupMenuButton 导航里的列表选项 索引位actions
child:Image(),点击的按钮
itemBuilder:(BuildContext context){ //点击显示的导航列表
return <PopupMenuItem<String>>[
PopupMenuItem()
]
}
Center
Container
Stack 悬浮控件 父元素， 子元素都堆叠再一起 内容区域大小取决于第一个元素大小
Positioned 悬浮空间 与stack 结合使用才有效
ListView
ListView直接用需要设置高度，否则可能报错，但高度不确定，所以用 Expanded 包一下也可解决报错问题
RichText
TextSpan
Text
Row 其属性 mainAxisAlignment: MainAxisAlignment.* 相当于display：flex
Cloumn
Icon
AspectRatio 设置宽高比 属性是 aspectRatio
Chip 气泡
FloatingActionButton 悬浮按钮
ElevatedButton 普通按钮
SizeBox（） 可设置宽高，占位用
BottomNavigationBar 底部导航栏 属性 items 有4个以上元素时 要设置 type:BottomNavigationBarType.fixed
BottomNavigationBarItem 底部导航栏元素
Image icon:Image(image:AssetImage('images/test.png'))
Image.asset()
Expanded //撑满剩余部分
MediaQuery.of(context).size.width 获取设备宽度
MediaQuery.of(context).size.height 获取设备高度
MediaQuery.removePadding() //通过MediaQuery.removePadding可以移除元素的pandding，需要注意要指定移除哪个方向的padding，例如移除上面的padding
MediaQuery.removePadding(
removeTop: true,
context: context,
child: ,
)
BoxDecoration 背景设置
decoration:BoxDecoration(
borderRadius:BorderRadius.circular(5.0), 设置圆角
image：DecorationImage（）
)
ListTile // 左图，右上标题右下内容 组件
ListTile(
title：Text("内容标题"),
subtitle:Container(), // 简介
leading:CircleAvatar( //头像
backgroundImage:Network()
)
)
GestureDetector(
onTap:(){}
) //监听点击组件
Center(
child:Text(
"text",
textDirection:TextDirection.rtl
)
)
设置底部导航颜色
Scanffold(
bottonNavigationBar:BottomNavigationBar(
onTap:(index){ //点击事件
setState((){})
},
selectedFontSize:12.0, //被选中时的字体大小
type:BottomNavigationBarType.fixed,
fixedColor:Colors.green, 被选中时的颜色
currentIndex:1 //当前被选中的索引
items:[]
)
)
底部导航点击会有水波纹效果 ，如何取消
在MaterialApp 里设置主题 高亮透明即可
MaterialApp(
theme:ThemeData(
highLightColor:Color.fromRGBO(0,0,0,0.0), //取消点击是的水波纹
splashColor:Color.fromRGBO(0,0,0,0.0), //取消弹开时的水波纹
primarySwatch:Colors.blue, //设置主题颜色
)
)
去掉appBar的阴影条
AppBar(
elevation:0.0
)
树结构
MterialApp
home:Scaffold
appBar
body