Flutter常用组件实践

1、MaterialApp 和 Center（组件居中)

class MyApp extends StatelessWidget {const MyApp({super.key});// This widget is the root of your application.@overrideWidget 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.@overrideWidget 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