Flutter基础（基础）

导航栏

appBar: AppBar()

2. title: const Text('搜索')  //标题

复制代码

2. backgroundColor: Colors.blue   //背景颜色

复制代码

2. centerTitle: true //标题居中

复制代码

leading 属性

作用：
放置在应用栏左侧的控件，通常是一个图标按钮，用于导航或打开菜单。

2. AppBar(
3.   leading: IconButton(
4.     icon: Icon(Icons.menu),
5.     onPressed: () {
6.       Scaffold.of(context).openDrawer(); // 打开侧边栏
7.     },
8.   ),
9. )

复制代码

actions 属性

作用：
放置在应用栏右侧的一组控件，通常是图标按钮，用于展示常用操作。

2. AppBar(
3.   actions: [
4.     IconButton(
5.       icon: Icon(Icons.search),
6.       onPressed: () {
7.         // 打开搜索功能
8.       },
9.     ),
10.     IconButton(
11.       icon: Icon(Icons.more_vert),
12.       onPressed: () {
13.         // 打开更多选项菜单
14.       },
15.     ),
16.   ],
17. )

复制代码

123

---

body

居中

2. Scaffold(
3.   appBar: AppBar(title: Text('标题')),
4.   body: Center(
5.     child: Text('这是主要内容'),
6.   ),
7. );

复制代码

垂直布局（Column）

•         MainAxisAlignment.start：子组件在主轴方向上对齐到起始位置。
  
•         MainAxisAlignment.end：子组件在主轴方向上对齐到结束位置。
  
•         MainAxisAlignment.spaceAround：子组件之间有等间距，但第一个和最后一个子组件与容器边缘的间距是其他间距的一半。
  
•         MainAxisAlignment.spaceBetween：子组件之间有等间距，但第一个和最后一个子组件分别对齐到容器的起始和结束位置。
  
•         MainAxisAlignment.spaceEvenly：子组件之间和子组件与容器边缘的间距都相称。
  

左边

2. Scaffold(
3.   body: Column(
4.     mainAxisAlignment: MainAxisAlignment.center,   //mainAxisAlignment：这是 Row 或 Column 布局组件中的一个属性，用来指定子组件在主轴方向上的对齐方式。
5.     children: [
6.       Text('标题'),
7.       
8. SizedBox(height: 16),
9.       ElevatedButton(
10.         onPressed: () {},
11.         child: Text('按钮'),
12.       ),
13.     ],
14.   ),
15. );

复制代码

居中

2. body: Center(
3.   child: Column(
4.     mainAxisAlignment: MainAxisAlignment.center,
5.     children: [
6.       Text('标题'),
7.       
8. SizedBox(height: 66),
9.       ElevatedButton(
10.         onPressed: () {},
11.         child: Text('按钮'),
12.       ),
13.     ],
14.   ),
15. )

复制代码

123

2. SizedBox

复制代码

1. Column(  children: [    Text('标题'),   
2. SizedBox(height: 16),    Text('内容'),  ],)

复制代码

效果：Text('标题') 和 Text('内容') 之间会有一个高度为 16 像素的垂直间距。

程度布局（Row）

2. Scaffold(
3.   body: Row(
4.     mainAxisAlignment: MainAxisAlignment.spaceEvenly,
5.     children: [
6.       Icon(Icons.star, size: 48),
7.       Icon(Icons.star, size: 48),
8.       Icon(Icons.star, size: 48),
9.     ],
10.   ),
11. );

复制代码

居中

2. return Scaffold(
3.       appBar: AppBar(title: const Text('个人中心')),
4.       body: Center(
5.         child: Row(
6.           mainAxisAlignment: MainAxisAlignment.spaceEvenly,
7.           children: [
8.             Icon(Icons.star, size: 48),
9.             Icon(Icons.star, size: 48),
10.             Icon(Icons.star, size: 48),
11.           ],
12.         )
13.       ),
14.     );

复制代码

容器

1. Scaffold(  body: Container(    padding: EdgeInsets.all(16), //意思就是容器内 空白16个像素点 空格 设置内边距为上下左右各16像素    child: Column(      crossAxisAlignment: CrossAxisAlignment.start, // 子组件在程度方向上对齐到起始位置      children: [        Text('标题', style: TextStyle(fontSize: 24)), // 表现标题，字体巨细为24        
2. SizedBox(height: 16), // 添加一个高度为16像素的垂直间距        Expanded( // 让子组件（ListView）占据剩余空间          child: ListView(            children: [              ListTile(title: Text('项目 1')), // 列表项1              ListTile(title: Text('项目 2')), // 列表项2              ListTile(title: Text('项目 3')), // 列表项3            ],          ),        ),      ],    ),  ),);

复制代码

123

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

继续阅读请点击广告