交互做的好的中国网站企业信息填报年报填写

导航栏

appBar: AppBar()

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

backgroundColor: Colors.blue   //背景颜色

centerTitle: true //标题居中

leading 属性

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

AppBar(leading: IconButton(icon: Icon(Icons.menu),onPressed: () {Scaffold.of(context).openDrawer(); // 打开侧边栏},),
)

actions 属性

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

AppBar(actions: [IconButton(icon: Icon(Icons.search),onPressed: () {// 打开搜索功能},),IconButton(icon: Icon(Icons.more_vert),onPressed: () {// 打开更多选项菜单},),],
)

123

---

body

居中

Scaffold(appBar: AppBar(title: Text('标题')),body: Center(child: Text('这是主要内容'),),
);

垂直布局（Column）

• MainAxisAlignment.start：子组件在主轴方向上对齐到起始位置。

• MainAxisAlignment.end：子组件在主轴方向上对齐到结束位置。

• MainAxisAlignment.spaceAround：子组件之间有等间距，但第一个和最后一个子组件与容器边缘的间距是其他间距的一半。

• MainAxisAlignment.spaceBetween：子组件之间有等间距，但第一个和最后一个子组件分别对齐到容器的起始和结束位置。

• MainAxisAlignment.spaceEvenly：子组件之间和子组件与容器边缘的间距都相等。

左边

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

居中

body: Center(child: Column(mainAxisAlignment: MainAxisAlignment.center,children: [Text('标题'),SizedBox(height: 66),ElevatedButton(onPressed: () {},child: Text('按钮'),),],),
)

123

SizedBox

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

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

水平布局（Row）

Scaffold(body: Row(mainAxisAlignment: MainAxisAlignment.spaceEvenly,children: [Icon(Icons.star, size: 48),Icon(Icons.star, size: 48),Icon(Icons.star, size: 48),],),
);

居中

return Scaffold(appBar: AppBar(title: const Text('个人中心')),body: Center(child: Row(mainAxisAlignment: MainAxisAlignment.spaceEvenly,children: [Icon(Icons.star, size: 48),Icon(Icons.star, size: 48),Icon(Icons.star, size: 48),],)),);

容器

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

123