Flutter中常用的UI设计

布局与基础控件

Scaffold 页面容器

Column/Row线性布局

Stack层叠布局

Text文本显示

Image图片显示

Button/ElevatedButton按钮

TextField输入框

ListView列表显示

GridView网格显示

AlertDialog弹窗对话

详细解释

Scaffold是页面骨架

使用场景：构建完整的页面时

Dart 复制代码

return Scaffold(
        //标题栏
       appBar: AppBar(
        leading: Image.asset("assets/images/apple.png"), //标题左侧图标
        title: Text("标题"),//导航栏标题
        actions: [ //右边的动作区域，可以放多个组件
          Image.asset("assets/images/apple.png"),
          Image.asset("assets/images/apple.png"),
          Image.asset("assets/images/apple.png"),
        ],
        elevation: 4.0,//控制下方阴影栏的坐标
        primary: true,//导航栏是否显示在任务栏顶部
        backgroundColor: Colors.red, //导航栏的背景颜色
        centerTitle: true,//标题是否居中
        titleSpacing: 2,//标题的间距
        toolbarOpacity: 0.8,//导航栏透明度，1.0表示完全不透明，0.0表示完全透明

      ),
      body: const Center( // 必须添加 body
        child: Text('页面内容区域'),
      ),
);

注\]：当背景是渐变的，又需要使用标题栏的时候，就把标题栏的颜色设置成渐变的第一个颜色。 \[注\]在组件之间加间距用SizedBox，根据需要加高或者宽 ```Dart SizedBox(height:x), SizedBox(width:y), ``` ###### Container是万能容器 使用场景：需要设置尺寸，边距，背景，边框时 ```Dart Container( width:100, //宽 height: 100,//高 //外边距：有三个参数all(全部)，only(单边)，symmetric(水平或垂直)， margin: EdgeInsets.symmetric(horizontal: 8), padding: EdgeInsets.all(8),//内边距的用法和外边距一样 decoration: BoxDecoration( //颜色，withOpacity是用来设置透明度的，值的范围（0.0~1.0） color: Color(0xFF5091C9).withOpacity(0.3), //圆角效果 borderRadius: BorderRadius.circular(20), //边距 border: Border.all(color: Colors.black,width: 5)， //设置形状 shape: BoxShape.circle， ), child: Text( "内容" ), ) ``` \[注\]如果在容器内要设置文字在最中心，要用Center控件 情景1：设置渐变 ```Dart decoration:BoxDecoration( gradient:LinearGradient( begin:Alignment.centerLeft, end:Alignment.centerRight, colors:[ Colors.red, Colors.black, ] ) ) //CentetLeft和centerRight是从左到右渐变 //topCenter和bottomCenter是从上到下的渐变 ``` 情景2：裁剪图片成圆形，不仅需要通过shape属性把容器设置成圆形，还需要裁剪图片 ```Dart ClipOval(child:Image.asset("assets/images/photo.png",width:90,height:90,fit:BoxFit.cover)) ``` 情景3：设置不同方向的圆角 ```Dart decoration: BoxDecoration( borderRadius: BorderRadius.only( topLeft:Radius.circular(8), topRight:Radius.circular(8), bottomLeft:Radius.circular(8), bottomRight:Radius.circular(8), ), ), ``` \[注\]如果要加点击事件，要用GestureDetector包裹Container,让整行可点击需要加入一句代码 ```Dart behavior:HitTestBehavior:opaque ```