flutter - 如何使用颤振在数据表中设置宽度并使行彼此靠近
问题描述
我正在尝试创建一个如下所示的屏幕:
所以我在这里使用 aDataTable
作为下面的代码:
import 'package:flutter/material.dart';
import 'package:catest/config/app_theme.dart';
import '../widgets/radio_btn_sim.dart';
class MyHomePage extends StatefulWidget {
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
@override
void initState() {
super.initState();
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: Stack(
children: [
SingleChildScrollView(
child: Column(
children: [
Padding(
padding: const EdgeInsets.only(
top: 100,
left: 20,
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
'Sim information',
style: TextStyle(fontWeight: FontWeight.bold),
),
Padding(
padding: const EdgeInsets.only(
left: 30,
),
child: DataTable(
columns: [
DataColumn(label: Text('Sim operator')),
DataColumn(
label: Row(
children: <Widget>[
Text('Vodafone'),
Image.asset(
'assets/images/vodic.png',
width: 30,
height: 30,
)
],
)),
],
rows: [
DataRow(cells: [
DataCell(Row(
children: <Widget>[
Image.asset(
'assets/images/sim_ic.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')),
]),
],
),
),
],
),
),
//Network provider
Padding(
padding: const EdgeInsets.only(
top: 20,
left: 20,
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
'Network Provider',
style: TextStyle(fontWeight: FontWeight.bold),
),
Padding(
padding: const EdgeInsets.only(
left: 30,
),
child: DataTable(
columns: [
DataColumn(label: Text('Operator')),
DataColumn(
label: Row(
children: <Widget>[
Text('Vodafone NL'),
Image.asset(
'assets/images/vodic.png',
width: 30,
height: 30,
)
],
)),
],
rows: [
DataRow(cells: [
DataCell(Row(
children: <Widget>[
Text('MCC'),
],
)),
DataCell(Text('204')),
]),
DataRow(cells: [
DataCell(Text('MNC')),
DataCell(Text('04')),
]),
],
),
),
],
),
),
//Serving Cell
Padding(
padding: const EdgeInsets.only(
top: 20,
left: 20,
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
'Serving Cell',
style: TextStyle(fontWeight: FontWeight.bold),
),
Padding(
padding: const EdgeInsets.only(
left: 30,
),
child: DataTable(
columns: [
DataColumn(label: Text('Data Net')),
DataColumn(
label: Row(
children: <Widget>[
Text('LTE'),
],
)),
],
rows: [
DataRow(cells: [
DataCell(Row(
children: <Widget>[
Text('Data type'),
],
)),
DataCell(Text('LTE')),
]),
DataRow(cells: [
DataCell(Text('TAC')),
DataCell(Text('62603')),
]),
DataRow(cells: [
DataCell(Text('PCI')),
DataCell(Text('118')),
]),
DataRow(cells: [
DataCell(Text('ECI')),
DataCell(Text('12315644(5465-567)')),
]),
DataRow(cells: [
DataCell(Text('EARFCN')),
DataCell(Text('1300/19300')),
]),
DataRow(cells: [
DataCell(Text('EARFCN')),
DataCell(Text('1300/19300')),
]),
DataRow(cells: [
DataCell(Text('FREQ')),
DataCell(Text('1815/1720')),
]),
DataRow(cells: [
DataCell(Text('BAND')),
DataCell(Text('3 FDD')),
]),
],
),
),
],
),
),
],
),
),
Positioned(
bottom: 0,
child: SizedBox(
width: MediaQuery.of(context).size.width,
child: RadioBtnSim(
),
),
),
],
),
);
}
}
结果如下图所示:
所以我看到输出中的文本位置不同,它们在中间,但我需要在开始和结束时,第二点我看到每一行之间都有间距,我需要在这里也减少间距,当有长文本时,我在这里看到一些填充...
那么我该如何解决这个..
解决方案
尝试将您的小部件包装在小部件中Align
,它为您提供alignment
参数以便更好地对齐您的子小部件。
推荐阅读
- c# - c# 修复 tcp 客户端本地端点端口导致 SocketException
- ios - 无法通过自定义请求在 avplayer 中播放视频
- javascript - 如何在asp.net中使用ScriptManager从aspx代码访问外部JS文件?
- python - 使用服务帐户通过 python 访问文件
- python - 补丁移动:文件备份和替换
- spring-boot - 具有多个数据源的 Spring Boot + Camel JPA
- javascript - 日期选择器持续时间问题
- android - 有没有办法检查哪个清单导入了一些使用权限?
- scala - 何时应该使用 Scala 类以及何时在 IDE 中使用 Scala 对象?
- python - Python多线程/进程用值填充矩阵