3、Container容器组件

Container容器组件

代码

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    home: Scaffold(
        appBar: AppBar(title: const Text("这是导航栏")),
        body: const Column(children: [  //引入多个主键
          myBody(),
          MyButton()
        ],))
  ));
}
// ignore: camel_case_types
class myBody extends StatelessWidget {
  const myBody({super.key});

  @override
  Widget build(BuildContext context) {
    return Center(
        child: Container(
      // alignment: Alignment.center, //配置Container内容器的方位
      alignment: Alignment.center, //配置Container内容器的方位
      width: 200,
      height: 200,
      // transform: Matrix4.translationValues(40, 0, 0), //位移
      // transform: Matrix4.rotationZ(0.2), //旋转
      //  transform: Matrix4.skewX(0.2), //倾斜
      margin:  const EdgeInsets.all(20.0),
      decoration: BoxDecoration(
        color: const Color.fromARGB(255, 13, 212, 103), //背景颜色
        border: Border.all(
            //边框
            color: Colors.red, //边框颜色
            width: 2.0),
        borderRadius: BorderRadius.circular(40), //圆角
        boxShadow: const [
          //配置阴影效果
          BoxShadow(
            color: Color.fromARGB(255, 236, 130, 8),
            offset: Offset(10.0, 10.0), //在 Flutter 中，Offset 是一个简单的二维坐标点
            blurRadius: 100.0, //阴影范围
          )
        ],
        gradient: const LinearGradient( // LinearGradient 背景线性渐变 RadialGradient径向渐变
          colors: [Color.fromARGB(255, 186, 192, 104), Color.fromARGB(255, 116, 240, 213)]),
      ),

      child: const Text("这是  内容",
          style: TextStyle(color: Colors.red, fontSize: 20.0)),
    ));
  }
}

//按扭
class MyButton extends StatelessWidget {
  const MyButton({super.key});

  @override
  Widget build(BuildContext context) {
    return Container(
      width: 240,
      height: 60,
      alignment:Alignment.center,
      // margin:  const EdgeInsets.all(20.0),  //所有的外边距
      margin:  const EdgeInsets.fromLTRB(20, 40, 20, 30), //四周的外边距
      decoration:  BoxDecoration( color: const Color.fromARGB(255, 99, 193, 221),
      borderRadius: BorderRadius.circular(20)),  //圆角
      child: const Text("按钮",style: TextStyle(
        color: Color.fromARGB(255, 9, 1, 31),
        fontSize: 20,
       ),),
    );
  }
}

图

padding 和maring

padding 是让容器和里面的元素有相应的间距，margin是让容器和容器外部的其他容器有相应的间距

Container(
margin: EdgeInsets.all(20.0), //容器外补白
color: Colors.orange,
child: Text("Hello world!"),
),
Container(
padding: EdgeInsets.all(20.0), //容器内补白
color: Colors.orange,
child: Text("Hello world!"),
),