flutter - 创建屏幕的最佳方法包含颤振中的细节
问题描述
我正在尝试创建一个屏幕,如下图所示:
我尝试创建如下代码:
child: Scaffold(
backgroundColor: AppTheme.nearlyWhite,
body: SingleChildScrollView(
child: SizedBox(
height: MediaQuery.of(context).size.height,
child: Column(
children: [
Column(
children: [
Padding(
padding: const EdgeInsets.only(
top: 100,
left: 20,
),
child: Column(
children: <Widget>[
SizedBox(
width: double.infinity,
child: Container(
child: Text(
"Sim Information",
style: TextStyle(
fontSize: 20,
fontWeight: FontWeight.bold,
),
textAlign: TextAlign.left,
),
),
),
],
),
),
Row(
children: [
Container(
padding: const EdgeInsets.only(
top: 16,
left: 50,
),
child: const Text(
'Sim Operator',
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 16,
),
),
),
Container(
padding: const EdgeInsets.only(
top: 16,
left: 50,
),
child: const Text(
'Vodafone',
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 16,
),
),
),
],
),
],
),
Padding(
padding: const EdgeInsets.only(
top: 30,
left: 20,
),
child: Column(
children: <Widget>[
SizedBox(
width: double.infinity,
child: Container(
child: Text(
"Network Provider",
style: TextStyle(
fontSize: 20,
fontWeight: FontWeight.bold,
),
textAlign: TextAlign.left,
),
),
),
],
),
),
Row(
children: [
Container(
padding: const EdgeInsets.only(
top: 16,
left: 50,
),
child: const Text(
'Sim Operator',
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 16,
),
),
),
Container(
padding: const EdgeInsets.only(
top: 16,
left: 50,
),
child: const Text(
'Vodafone',
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 16,
),
),
),
],
),
Padding(
padding: const EdgeInsets.only(
top: 30,
left: 20,
),
child: Column(
children: <Widget>[
SizedBox(
width: double.infinity,
child: Container(
child: Text(
"Serving Cell",
style: TextStyle(
fontSize: 20,
fontWeight: FontWeight.bold,
),
textAlign: TextAlign.left,
),
),
),
],
),
),
Row(
children: [
Container(
padding: const EdgeInsets.only(
top: 16,
left: 50,
),
child: const Text(
'Sim Operator',
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 16,
),
),
),
Container(
padding: const EdgeInsets.only(
top: 16,
left: 50,
),
child: const Text(
'Vodafone',
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 16,
),
),
),
],
),
],
),
),
),
),
但据我所知,我认为这不合逻辑,也没有组织......
我看到输出没有像我在图像中显示的那样组织。
所以我希望有人可以为这种类型的屏幕推荐一个好的解决方案:)..
解决方案
颤振中有两个小部件来组织您的数据
检查女巫一更适合您的用户界面
class SimInformation extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Padding(
padding: const EdgeInsets.all(8.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text('Sim information', style: TextStyle(fontWeight: FontWeight.bold),),
DataTable(
columns: [
DataColumn(label: Text('Sim operator')),
DataColumn(label: Row(
children: <Widget>[
Text('Vodafone'),
Image.asset('assets/images/vodafone.png', width: 30, height: 30,)
],
)),
],
rows: [
DataRow(cells: [
DataCell(Row(
children: <Widget>[
Image.asset('assets/images/sim.png', width: 30, height: 30,),
Text('ICCID'),
],
)),
DataCell(Text('123456789')),
]),
DataRow(cells: [
DataCell(Text('IMEI')),
DataCell(Text('123456789')),
]),
DataRow(cells: [
DataCell(Text('SIM IMSI')),
DataCell(Text('123456789')),
]),
],
),
],
),
);
}
}
推荐阅读
- django - 如何将我的投诉列表呈现到卡片中以便能够查看它们?
- libasound - Aplay 示例格式不可用
- amazon-web-services - 处于连接丢失状态的 Systems Manager 托管实例
- ios - 从 Health App 实时获取新的心率数据?
- django - 即使从泛型扩展类,分页在 DRF 中也不起作用
- go - 如何使用(gorm.io/gorm.DB 类型的变量)作为 github.com/jinzhu/gorm.DB?
- jvm - 为什么 jdk8 使用元空间而不是 PermGen 空间
- excel - vba Excel:仅打印当前页面通过每个 hPagebreak 循环
- javascript - 无法在 discord.js 中获取频道
- javascript - 在 React 中使用 UseContext 时获取未定义的值