row 和 column
新建项目,执行以下命令:
flutter create projectName
cd projectName
flutter run
在项目lib同级目录下新建images文件夹,放入三张图,目录结构如下图
![](https://img.haomeiwen.com/i4390663/1b25f220433b7a5a.png)
在配置文件 pubspec.ymal文件中配置图片资源,加入如下图代码
![](https://img.haomeiwen.com/i4390663/cd6d57703d25e43e.png)
row
在main.dart 文件中,实现代码
class RowPage extends StatelessWidget {
const RowPage({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'web tite',
home: Scaffold(
appBar: AppBar(title: const Text('a'),),
body: Center(
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Image.asset('images/pic1.jpg'),
Image.asset('images/pic2.jpg'),
Image.asset('images/pic3.jpg'),
// Expanded(child: Image.asset('images/pic1.jpg')),
// Expanded(child: Image.asset('images/pic2.jpg')),
// Expanded(child: Image.asset('images/pic3.jpg')),
],
)
)
),
);
}
}
void main(List<String> args) {
runApp(const RowPage());
}
运行效果:
![](https://img.haomeiwen.com/i4390663/48c2114e3d990108.png)
column
class ColumnPage extends StatelessWidget {
const ColumnPage({super.key});
@override
Widget build(BuildContext context) {
return Container(
decoration: const BoxDecoration(color: Colors.white),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Image.asset('images/pic1.jpg'),
Image.asset('images/pic2.jpg'),
Image.asset('images/pic3.jpg'),
],
),
);
}
}
void main(List<String> args) {
runApp(const ColumnPage());
}
运行效果:
![](https://img.haomeiwen.com/i4390663/2f5a895659933604.png)
网友评论