row 和 column
新建项目，执行以下命令：
flutter create projectName
cd projectName
flutter run
在项目lib同级目录下新建images文件夹，放入三张图，目录结构如下图
截屏2022-05-17 下午4.23.50.png
在配置文件 pubspec.ymal文件中配置图片资源，加入如下图代码
截屏2022-05-17 下午4.25.37.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());
}
运行效果：
Simulator Screen Shot - iPhone 13 Pro Max - 2022-05-17 at 17.04.19.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());
}
运行效果：
Simulator Screen Shot - iPhone 13 Pro Max - 2022-05-17 at 16.29.21.png
