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