我连续有一个图像,并且在该图像旁边有一个文本。我希望该行完全展开,并且图像以其大小显示,然后保持完整区域应由Container拍摄。
这是我的代码段:
Row( children: <Widget>[ Container( margin: EdgeInsets.fromLTRB(10, 50, 10, 8), decoration: BoxDecoration( color: Colors.white, boxShadow: [ BoxShadow( color: Color.fromARGB(100, 0, 0, 0), blurRadius: 5, ), ], ), child: Row( mainAxisSize: MainAxisSize.max, children: <Widget>[ Column(children: <Widget>[ Image.asset( 'assets/card.png', height: 62, width: 62, fit: BoxFit.cover, ) ]), Container( child: Text("Hello world"), ) ], ), ), ], ),
我想要这样: Flutter UI
我建议您仅开始构建布局,Row而Column不要感到困惑。我经常按如下方式构建布局。
Row
Column
mainAxisAlignment
crossAxisAlignment
Row``Column
Padding
Align
Expanded
Container
参考:
布局基本:
https://flutter.dev/docs/development/ui/layout
构建布局时的提示:
https://medium.com/@liewjuntung/tips-on-using-android-studio-to-develop- flutter-apps-9e42c047b7f4
希望对您有帮助。
示例代码:
Widget buildCard() { return Container( margin: EdgeInsets.all(10.0), decoration: BoxDecoration( color: Colors.white, boxShadow: [ BoxShadow( color: Color.fromARGB(100, 0, 0, 0), blurRadius: 5, ), ], ), child: Row( crossAxisAlignment: CrossAxisAlignment.start, children: <Widget>[ Image.asset( 'assets/card.png', height: 62, width: 62, fit: BoxFit.cover, ), Padding( padding: const EdgeInsets.only(top: 12.0, left: 12.0), child: Text( "Hello world", style: TextStyle( fontWeight: FontWeight.w500, letterSpacing: 0.8, ), ), ) ], ), ); }