flutter UI笔记（二）

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 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 args) {
  runApp(const ColumnPage());
}

运行效果：

Simulator Screen Shot - iPhone 13 Pro Max - 2022-05-17 at 16.29.21.png