Я хочу нарисовать виджет таблицы на своем экране. Это мой код:
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Container(
padding: const EdgeInsets.all(10),
alignment: Alignment.center,
width: MediaQuery.of(context).size.width,
decoration: BoxDecoration(
color: Colors.grey.shade400,
border: Border.all(
color: Colors.black, // Set border color
width: 1.5), // Set border width
),
child: const Text("EMPLOYEE DETAILS",style: TextStyle(color: Colors.white, fontWeight: FontWeight.bold, fontFamily: 'Lobster')),
),
Container(
margin: const EdgeInsets.all(20),
alignment: Alignment.center,
width: MediaQuery.of(context).size.width,
decoration: BoxDecoration(
color: Colors.blue.shade300,
border: Border.all(
color: Colors.black, // Set border color
width: 1.0), // Set border width
),
child:Table(
border: TableBorder.all(
color: Colors.black,
style: BorderStyle.solid,
width: 2),
children: [
TableRow( children: [
Column(children:const [Text('Employee No')]),
Column(children:const [Text('NULL')]),
]),
TableRow( children: [
Column(children:const [Text('Employee Name')]),
Column(children:const [Text('NULL')]),
]),
TableRow( children: [
Column(children:const [Text('Designation')]),
Column(children:const [Text('NULL')]),
]),
TableRow( children: [
Column(children:const [Text('Department')]),
Column(children:const [Text('NULL')]),
]),
TableRow( children: [
Column(children:const [Text('BU/Station')]),
Column(children:const [Text('NULL')]),
]),
TableRow( children: [
Column(children:const [Text('Qtr No')]),
Column(children:const [Text('NULL')]),
]),
],
),
),
После выполнения кода я обнаружил, что между двумя контейнерами есть ненужное пространство.
Почему там космос? Как убрать это пространство?
Пустое пространство было получено из параметра поля, поле устанавливает запасное значение на внешней границе и отступы внутри. Комментарий
поле: const EdgeInsets.all(20)
Просто найдите в Google информацию о разнице между полями и отступами. Или вот еще вопрос по тому же поводу.
в чем разница между полями и отступами в виджете Container с использованием фреймворка Flutter?
Он исходит из поля во втором контейнере. Если вы хотите удалить верхнее поле контейнера, используйте -
поле: const EdgeInsets.only (слева: 20, справа: 20, снизу: 20)
Это даст вам желаемый результат. Надеюсь, это полезно.
поле: const EdgeInsets.all(20), -> поле: const EdgeInsets.all(0),