import 'package:flutter/material.dart'; import 'package:flutter_navigator_v2/counter.dart'; import 'package:provider/provider.dart'; void main() { runApp(const MyApp()); } class MyApp extends StatelessWidget { const MyApp({Key? key}) : super(key: key); // generate item Widget _item(String title) { return Container( padding: const EdgeInsets.all(40), width: 300, color: Colors.grey, margin: const EdgeInsets.all(10), child: Row( mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [ Image.network( 'https://picsum.photos/250?image=9', width: 100, height: 100, ), SizedBox( height: 100, child: Column( crossAxisAlignment: CrossAxisAlignment.start, mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [ Container( margin: const EdgeInsets.only(bottom: 10), child: const SizedBox( width: 100, height: 40, child: Text( "这是一个文本这是一个文本这是一个文本这是一个文本这是一个文本这是一个文本", maxLines: 2, overflow: TextOverflow.ellipsis, style: TextStyle( fontSize: 14, color: Colors.white, fontWeight: FontWeight.bold, ), ), ), ), Row( children: const [ Icon( Icons.remove_red_eye, color: Colors.white, ), SizedBox( width: 10, ), Text( "这是一个文本", style: TextStyle( fontSize: 14, color: Colors.white, ), ), ], ) ], ), ), ], ), ); } @override Widget build(BuildContext context) { return ChangeNotifierProvider.value( value: CountModel(), child: MaterialApp( title: 'Flutter Demo', theme: ThemeData( primarySwatch: Colors.blue, ), home: Scaffold( appBar: AppBar( title: const Text('Flutter Demo'), ), body: ListView.builder( itemCount: 10, itemBuilder: (context, index) { return _item('$index'); }, ), ), ), ); } }
crossAxisAlignment: CrossAxisAlignment.start：这个用于标记Row行布局组件的元素在列方向上从起始位置开始对齐（即纵向上右侧和图片上沿对齐）。
Container 的 margin：用于设置距离上下左右的间距，如果四个方向间距一致，就可以使用 EdgeInsets.all 方法设置。如果不一致就是要 EdgeInsets.fromLTRB 单独设置四个方向的间距。
SizedBox 组件，这个组件本身没什么内容，仅仅是为了将图标和浏览数字之间拉开一定的间距，提高美观度。
Text：文本组件，相当于是 label。除了文字内容外，可以使用 style 设置文字样式。这里标题使用了 maxLines 约束标题最大2行，使用了 overflow 设置了文字溢出后处理方式。
Image：图片组件，这里使用了 Image.network 从网络加载图片，这个 Image.network 是很初级的用法，后续会使用 cached_image_network 插件替换。
Icon：图标组件，在 Flutter 中内置了很多字体图标，对于大部分场景都能够满足，图标可以使用 Icons 类定义的图标名称来找到想要的图标。
Row：行布局组件，其子组件 children 都是按先后顺序从左到右在同一行依次排列。
Column：列布局组件，其子组件 children 都是按从先后顺序从上到下在同一列依次排列。
@override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text(widget.title), ), body: Center( child: Column( mainAxisAlignment: MainAxisAlignment.start, children: <Widget>[ Row(mainAxisAlignment: MainAxisAlignment.start, children: <Widget>[ Container( color: Colors.blue, child: Text('start1', style: TextStyle(fontSize: 15))), Container( color: Colors.blue, child: Text('start2', style: TextStyle(fontSize: 15))), Container( color: Colors.blue, child: Text('start3', style: TextStyle(fontSize: 15))), ]), Row(mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ Container( color: Colors.blue, child: Text('center1', style: TextStyle(fontSize: 15))), Container( color: Colors.blue, child: Text('center2', style: TextStyle(fontSize: 15))), Container( color: Colors.blue, child: Text('center3', style: TextStyle(fontSize: 15))), ]), Row(mainAxisAlignment: MainAxisAlignment.end, children: <Widget>[ Container( color: Colors.blue, child: Text('end1', style: TextStyle(fontSize: 15))), Container( color: Colors.blue, child: Text('end2', style: TextStyle(fontSize: 15))), Container( color: Colors.blue, child: Text('end2', style: TextStyle(fontSize: 15))), ]), Row(mainAxisAlignment: MainAxisAlignment.spaceAround, children: < Widget>[ Container( color: Colors.blue, child: Text('spaceAround1', style: TextStyle(fontSize: 15))), Container( color: Colors.blue, child: Text('spaceAround2', style: TextStyle(fontSize: 15))), Container( color: Colors.blue, child: Text('spaceAround3', style: TextStyle(fontSize: 15))), ]), Row(mainAxisAlignment: MainAxisAlignment.spaceBetween, children: < Widget>[ Container( color: Colors.blue, child: Text('spaceBetween1', style: TextStyle(fontSize: 15))), Container( color: Colors.blue, child: Text('spaceBetween2', style: TextStyle(fontSize: 15))), Container( color: Colors.blue, child: Text('spaceBetween3', style: TextStyle(fontSize: 15))), ]), Row(mainAxisAlignment: MainAxisAlignment.spaceEvenly, children: < Widget>[ Container( color: Colors.blue, child: Text('spaceEvenly1', style: TextStyle(fontSize: 15))), Container( color: Colors.blue, child: Text('spaceEvenly2', style: TextStyle(fontSize: 15))), Container( color: Colors.blue, child: Text('spaceEvenly3', style: TextStyle(fontSize: 15))), ]), ], ), ), ); }