Flutter基础()

导航栏

appBar: AppBar()

复制代码
title: const Text('搜索')  //标题
复制代码
backgroundColor: Colors.blue   //背景颜色
复制代码
centerTitle: true //标题居中

leading 属性

作用

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

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

actions 属性

作用

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

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

123


body

居中

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

垂直布局(Column)

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

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

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

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

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

左边

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

居中

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

123

复制代码
SizedBox
Dart 复制代码
Column(
  children: [
    Text('标题'),
    SizedBox(height: 16),
    Text('内容'),
  ],
)

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

水平布局(Row)

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

居中

Dart 复制代码
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),
          ],
        )
      ),
    );

容器

Dart 复制代码
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

相关推荐
小蜜蜂嗡嗡38 分钟前
Android Studio flutter项目运行、打包时间太长
android·flutter·android studio
瓜子三百克4 小时前
十、高级概念
flutter
帅次17 小时前
Objective-C面向对象编程:类、对象、方法详解(保姆级教程)
flutter·macos·ios·objective-c·iphone·swift·safari
小蜜蜂嗡嗡18 小时前
flutter flutter_vlc_player播放视频设置循环播放失效、初始化后获取不到视频宽高
flutter
孤鸿玉20 小时前
[Flutter小技巧] Row中widget高度自适应的几种方法
flutter
bawomingtian12320 小时前
FlutterView 源码解析
flutter
Zender Han1 天前
Flutter 进阶:实现带圆角的 CircularProgressIndicator
flutter
nc_kai1 天前
Flutter 之 每日翻译 PreferredSizeWidget
java·前端·flutter
littlegnal1 天前
Flutter Add-to-app profiling
flutter