#flutter #dart
#flutter #dart
Вопрос:
Я пытаюсь создать экран, как показано на рисунке ниже:
и это приведенный ниже код, который я создал:
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: 10,
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
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/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: 10,
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
Text(
'Network Provider',
style: TextStyle(fontWeight: FontWeight.bold),
),
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: 10,
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
Text(
'Serving Cell',
style: TextStyle(fontWeight: FontWeight.bold),
),
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.centerRight , но это не сработало..
Так может ли это решить эту проблему?
Комментарии:
1. Я думаю, вам нужны столбец и строка, потому что в DataTable нет никакого свойства, которое выравнивало бы текст по правому краю. Спасибо
2. @AbhishekGhaskata как я могу это использовать, и как насчет уменьшения расстояния между строками 🙂
3. вы можете указать расстояние между строками и mainAxisAlignment.
4. @AbhishekGhaskata спасибо за ваш комментарий, но как я могу это сделать, не могли бы вы привести мне какой-нибудь пример: D
Ответ №1:
в таблице данных вы можете использовать dataRowHeight: double, для изменения высоты.
из документа в https://api.flutter.dev/flutter/material/DataTable/dataRowHeight.html
Высота каждой строки (исключая строку, содержащую заголовки столбцов).
По умолчанию это значение равно kMinInteractiveDimension, чтобы соответствовать спецификациям Material Design.
а для пространства управляющего столбца вы можете использовать columnSpacing
документ виджета DataTable:https://api.flutter.dev/flutter/material/DataTable-class.html
Ответ №2:
вы можете использовать комбинацию строк и столбцов следующим образом
Column(
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text("Name : "),
Text(decodedToken['name'].toString()),
],
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text("Email : "),
Text(decodedToken['email'].toString()),
],
),
],
),
Комментарии:
1. спасибо, теперь я понял вас, действительно, это был мой первый прием, но я изменяю его, используя
DataTableвместо этого : (2. да, большинство пользователей делают то же самое, но у виджета DataTable есть много ограничений.
3. даже мы не можем создать таблицу данных с другим размером строки, используя DataTable, а также не тему, которую мы можем установить в table