Flutter常用组件实践

1、MaterialApp 和 Center（组件居中)

class MyApp extends StatelessWidget {
   
  const MyApp({
   super.key});

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
   
    return MaterialApp(
      title: '我的应用',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: Center(
        child: Text("测试文本")
      ),
    );
  }
}

2、Scaffold

Scaffold 实现了基本的 MaterialApp 布局。只要是在 Material 中定义了的单个界面显示的布局控件元素，都可以使用 Scaffold 来绘制。

class MyApp extends StatelessWidget {
   
  const MyApp({
   super.key});

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
   
    return MaterialApp(
        title: '我的应用',
        theme: ThemeData(
          colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
          useMaterial3: true,
        ),
        home: Scaffold(
          appBar: AppBar(
            title: Text('我是页面标题'),
            centerTitle: true,
            elevation: 0,
            bottom: null,
            backgroundColor: Colors.orangeAccent,
            bottomOpacity: 0,
          ),
          //头部导航条区域
          body: Center(
            child: Text('我是主体内容'),
          ),
          //页面主题内容区域
          floatingActionButton: FloatingActionButton(
            onPressed: () {
   },
            child: Icon(Icons.add),
          ),
          //右下角浮动按钮区域
          drawer: Drawer(),
          //侧边栏抽屉区域
          bottomNavigationBar: BottomNavigationBar(
            items: [
              BottomNavigationBarItem(
                icon: Icon(
                  Icons.home,
                  color: Colors.grey,
                ),
                activeIcon: Icon(
                  Icons.home,
                  color: Colors.blue,
                ),
                label: '首页',
              ),
              BottomNavigationBarItem(
                icon: Icon(
                  Icons.list,
                  color: Colors.grey,
                ),
                activeIcon: Icon(
                  Icons.list,
                  color: Colors.blue,
                ),
                label: "列表",
              )
            ],
          ),
        ) //底部tabBar区域,
    );
  }
}

3、Container（容器）

将Container容器放在上面的Scaffold对象的body部分，则到如下

Container(
    width: 200, //宽度
    height: 200, //长度
    child: Text("我是body部分的内容"), //子组件
    decoration: BoxDecoration(
      color: Colors.blue,
    ), //装饰器
    padding: EdgeInsets.all(10),
    //内容距离盒子边界的距离
    margin: EdgeInsets.all(10) //盒子边界之外的距离
)

4、BoxDecoration（装饰器）

Center(
  child: Container(
    width: 270,
    height: 470,
    decoration: BoxDecoration(
        color: Colors.blue, //颜色背景
        image: DecorationImage(
          image: NetworkImage("https://inews.gtimg.com/om_bt/O_DyA7LF3uL3wZ9zYVo8ZhI_IMUOn_NJ_Pgj2IhAuRApoAA/641"), //背景图片
          fit: BoxFit.cover, //图片充满组件
        ),
        border: Border.all(
          color: Colors.red,
          width: 5.0,
        )
    ), //设置边框
  ),
)

5、Column（纵向布局）及Icon（图标）

Column(
    children: <Widget>[
      Expanded(child: Text('主体内容1'), flex: 3,),
      Expanded(child: Text('主体内容2'), flex