gpt4 book ai didi

flutter - 创建屏幕的最佳方法是在抖动中包含细节

转载 作者:行者123 更新时间:2023-12-03 03:31:48 24 4
gpt4 key购买 nike

我正在尝试创建一个屏幕,如下图所示:
example
我尝试创建如下代码:

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,
),
),
),
],
),
],
),
),
),
),
但据我所知,这是不合逻辑且没有组织的...
我看到输出的组织程度不如图片所示。
因此,我希望有人能为我推荐这种屏幕的好解决方案:) ..

最佳答案

flutter中有两个小部件来组织数据
1-表
YouTube
document
2-数据表
YouTube
document
检查女巫一个更适合您的UI
enter image description here

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')),
]),
],
),
],
),
);
}
}

关于flutter - 创建屏幕的最佳方法是在抖动中包含细节,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/63512687/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com