Flutter基础（）

导航栏

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)), // 显示标题，字体大小为24
        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