颤动问题：如何制作这样的行和列以及文本位置？
flutter problem: How to make row and column like this and text position?
在这里我分享了两个截图，第一个是我想要的，第二个是我创建的。
我想要像实际 ui 中的水平垂直分隔线和像我实际中的文本位置 ui.
这是我的代码。
import 'package:bonana_flutter/Constants/constants.dart';
import 'package:flutter/material.dart';
class details extends StatefulWidget {
const details({Key? key}) : super(key: key);
@override
_detailsState createState() => _detailsState();
}
class _detailsState extends State<details> {
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: lightBlue,
body: Container(
child: SingleChildScrollView(
child: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
SizedBox(height: 20,),
Padding(
padding: const EdgeInsets.all(20.0),
child: Text(
"PAN Details Verified Successfully!",
style: TextStyle(
fontSize: tSize32,
fontWeight: FontWeight.w500,
color: greenColor,
),
),
),
Padding(
padding: const EdgeInsets.only(
top: 0.0, left: 20, right: 20, bottom: 20),
child: Text(
"We have fetched these details from your pan card successfully.",
style: TextStyle(
fontSize: tSize14,
color: greyColor,
),
),
),
Padding(
padding: const EdgeInsets.only(
top: 20.0, left: 20, right: 20, bottom: 20),
child: Column(
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text("Name:"),
Text("Chetan Singh"),
],
),
Divider(),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text("PAN Number:"),
Text("XXXXXX0862"),
],
), Divider(),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text("Email Address:"),
Text("chitansingh1234@gmail.com"),
],
), Divider(),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text("Phone Number:"),
Text("XXXXXX1234"),
],
),
],
),
),
Padding(
padding:
const EdgeInsets.only(top: 20.0, bottom: 20, left: 20, right: 20),
child: SizedBox(
height: 45,
width: MediaQuery.of(context).size.width,
child: ElevatedButton(
style: ElevatedButton.styleFrom(
primary: skyBlue, shadowColor: Colors.transparent),
onPressed: () {
},
child: Text('Continue to Create MPIN',
style: TextStyle(
fontSize: tSize16,
)),
),
),
),
],
),
),
),
),
);
}
}
我想要这样ui。
这是我做的ui。
我为您的输出制作了简单而简短的代码
输出：-
代码:-
列出值
List details = [
{
"title": "Name",
"value": "Chetan Singh",
},
{
"title": "PAN Number",
"value": "XXXXXX0862",
},
{
"title": "Email Address",
"value": "chitansingh1234@gmail.com",
},
{
"title": "Phone Number",
"value": "XXXXXX1234",
},
];
在列表视图中获取详细信息
Column(
children: List.generate(
details.length,
(index) => Column(
children: [
Row(
children: [
SizedBox(
width: size.width / 3,
child: Text("${details[index]["title"]}:"),
),
Container(
height: 44.0,
width: 0.5,
margin: const EdgeInsets.only(right: 16.0),
color: Colors.grey,
),
Text(details[index]["value"]),
],
),
Divider(
thickness: 0.5,
color: index == details.length - 1
? Colors.transparent
: Colors.grey,
height: 0.0,
)
],
),
),
),
您可以将 Table 与
一起使用
final borderSide = BorderSide(
width: 1,
color: Colors.grey,
);
Table(
border: TableBorder(horizontalInside: borderSide, verticalInside: borderSide),
children: <TableRow>[...],
);
你可以试试这个方法，几乎可以做你想做的事：
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.lightBlue,
body: Container(
child: SingleChildScrollView(
child: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
const SizedBox(height: 20,),
const Padding(
padding: const EdgeInsets.all(20.0),
child: Text(
"PAN Details Verified Successfully!",
style: TextStyle(
fontSize: 18,
fontWeight: FontWeight.w500,
color: Colors.green,
),
),
),
const Padding(
padding: EdgeInsets.only(
top: 0.0, left: 20, right: 20, bottom: 20),
child: Text(
"We have fetched these details from your pan card successfully.",
style: TextStyle(
fontSize: 14,
color: Colors.grey,
),
),
),
Padding(
padding: const EdgeInsets.only(
top: 20.0, left: 20, right: 20, bottom: 20),
child: Column(
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Container(
child: Text("Name:"),
padding: EdgeInsets.all(15),
decoration: BoxDecoration(
border: Border(
right: BorderSide(color: Colors.blue, width: 2)
),
),
width: 130,
height: 50,
),
Text("Chetan Singh"),
],
),
const Divider(height: 0),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Container(
child: Text("PAN Number:"),
padding: EdgeInsets.all(15),
decoration: BoxDecoration(
border: Border(
right: BorderSide(color: Colors.blue, width: 2)
),
),
width: 130,
height: 50,
),
Text("XXXXXX0862"),
],
), const Divider(height: 0),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Container(
child: Text("Email Address:"),
padding: EdgeInsets.all(15),
decoration: BoxDecoration(
border: Border(
right: BorderSide(color: Colors.blue, width: 2)
),
),
width: 130,
height: 50,
),
Text("chitansingh1234@gmail.com"),
],
), const Divider(height: 0),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Container(
child: Text("Phone Number:"),
padding: EdgeInsets.all(15),
decoration: BoxDecoration(
border: Border(
right: BorderSide(color: Colors.blue, width: 2)
),
),
width: 130,
height: 50,
),
Text("XXXXXX1234"),
],
),
],
),
),
Padding(
padding:
const EdgeInsets.only(top: 20.0, bottom: 20, left: 20, right: 20),
child: SizedBox(
height: 45,
width: MediaQuery.of(context).size.width,
child: ElevatedButton(
style: ElevatedButton.styleFrom(
primary: Colors.blue, shadowColor: Colors.transparent),
onPressed: () {
},
child: const Text('Continue to Create MPIN',
style: TextStyle(
fontSize: 16,
)),
),
),
),
],
),
),
),
),
);
}
完整代码如下：
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return const MaterialApp(
debugShowCheckedModeBanner: false,
home: Details(),
);
}
}
class Details extends StatefulWidget {
const Details({Key? key}) : super(key: key);
@override
_DetailsState createState() => _DetailsState();
}
class _DetailsState extends State<Details> {
@override
Widget build(BuildContext context) {
const borderSide = BorderSide(
// define border to table
width: 0.5, // define border to table
color: Colors.grey, // define border to table
); // define border to table
return Scaffold(
backgroundColor: Colors.blue[100],
body: SingleChildScrollView(
child: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
const SizedBox(
height: 20,
),
const Padding(
padding: EdgeInsets.all(20.0),
child: Text(
"PAN Details Verified Successfully!",
style: TextStyle(
fontSize: 32,
fontWeight: FontWeight.w500,
color: Colors.green,
),
),
),
Padding(
padding: const EdgeInsets.only(
top: 0.0, left: 20, right: 20, bottom: 20),
child: Text(
"We have fetched these details from your pan card successfully.",
style: TextStyle(
fontSize: 14,
color: Colors.grey[600],
),
),
),
Padding(
padding: const EdgeInsets.only(
top: 20.0, left: 20, right: 20, bottom: 20),
child: Table(
// use table with padding
columnWidths: const {
// use table columnWidths as you want
0: FlexColumnWidth(3), // use table columnWidths as you want
1: FlexColumnWidth(7), // use table columnWidths as you want
}, // use table columnWidths as you want
border: const TableBorder(
horizontalInside: borderSide,
verticalInside:
borderSide), // use border you defined before
children: <TableRow>[
// add table rows with style
TableRow(children: [
// add table rows with style
const Padding(
// add table rows with style
padding:
EdgeInsets.all(8.0), // add table rows with style
child: Text("Name:"), // add table rows with style
), // add table rows with style
Padding(
// add table rows with style
padding: const EdgeInsets.all(
8.0), // add table rows with style
child: Text(
// add table rows with style
"Chetan Singh", // add table rows with style
style: TextStyle(
color: Colors
.blue[800]), // add table rows with style
), // add table rows with style
), // add table rows with style
]), // add table rows with style
TableRow(children: [
const Padding(
padding: EdgeInsets.all(8.0),
child: Text("PAN Number:"),
),
Padding(
padding: const EdgeInsets.all(8.0),
child: Text(
"XXXXXX0862",
style: TextStyle(color: Colors.blue[800]),
),
),
]),
TableRow(children: [
const Padding(
padding: EdgeInsets.all(8.0),
child: Text("Email Address:"),
),
Padding(
padding: const EdgeInsets.all(8.0),
child: Text(
"chitansingh1234@gmail.com",
style: TextStyle(color: Colors.blue[800]),
),
),
]),
TableRow(children: [
const Padding(
padding: EdgeInsets.all(8.0),
child: Text("Phone Number:"),
),
Padding(
padding: const EdgeInsets.all(8.0),
child: Text(
"XXXXXX1234",
style: TextStyle(color: Colors.blue[800]),
),
),
]),
],
),
),
Padding(
padding: const EdgeInsets.only(
top: 20.0, bottom: 20, left: 20, right: 20),
child: SizedBox(
height: 45,
width: MediaQuery.of(context).size.width,
child: ElevatedButton(
style: ElevatedButton.styleFrom(
primary: Colors.blue, shadowColor: Colors.transparent),
onPressed: () {},
child: const Text('Continue to Create MPIN',
style: TextStyle(
fontSize: 16,
)),
),
),
),
],
),
),
),
);
}
}
和前面代码的结果：
在这里我分享了两个截图，第一个是我想要的，第二个是我创建的。 我想要像实际 ui 中的水平垂直分隔线和像我实际中的文本位置 ui.
这是我的代码。
import 'package:bonana_flutter/Constants/constants.dart';
import 'package:flutter/material.dart';
class details extends StatefulWidget {
const details({Key? key}) : super(key: key);
@override
_detailsState createState() => _detailsState();
}
class _detailsState extends State<details> {
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: lightBlue,
body: Container(
child: SingleChildScrollView(
child: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
SizedBox(height: 20,),
Padding(
padding: const EdgeInsets.all(20.0),
child: Text(
"PAN Details Verified Successfully!",
style: TextStyle(
fontSize: tSize32,
fontWeight: FontWeight.w500,
color: greenColor,
),
),
),
Padding(
padding: const EdgeInsets.only(
top: 0.0, left: 20, right: 20, bottom: 20),
child: Text(
"We have fetched these details from your pan card successfully.",
style: TextStyle(
fontSize: tSize14,
color: greyColor,
),
),
),
Padding(
padding: const EdgeInsets.only(
top: 20.0, left: 20, right: 20, bottom: 20),
child: Column(
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text("Name:"),
Text("Chetan Singh"),
],
),
Divider(),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text("PAN Number:"),
Text("XXXXXX0862"),
],
), Divider(),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text("Email Address:"),
Text("chitansingh1234@gmail.com"),
],
), Divider(),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text("Phone Number:"),
Text("XXXXXX1234"),
],
),
],
),
),
Padding(
padding:
const EdgeInsets.only(top: 20.0, bottom: 20, left: 20, right: 20),
child: SizedBox(
height: 45,
width: MediaQuery.of(context).size.width,
child: ElevatedButton(
style: ElevatedButton.styleFrom(
primary: skyBlue, shadowColor: Colors.transparent),
onPressed: () {
},
child: Text('Continue to Create MPIN',
style: TextStyle(
fontSize: tSize16,
)),
),
),
),
],
),
),
),
),
);
}
}
我想要这样ui。
这是我做的ui。
我为您的输出制作了简单而简短的代码
输出：-
代码:-
列出值
List details = [
{
"title": "Name",
"value": "Chetan Singh",
},
{
"title": "PAN Number",
"value": "XXXXXX0862",
},
{
"title": "Email Address",
"value": "chitansingh1234@gmail.com",
},
{
"title": "Phone Number",
"value": "XXXXXX1234",
},
];
在列表视图中获取详细信息
Column(
children: List.generate(
details.length,
(index) => Column(
children: [
Row(
children: [
SizedBox(
width: size.width / 3,
child: Text("${details[index]["title"]}:"),
),
Container(
height: 44.0,
width: 0.5,
margin: const EdgeInsets.only(right: 16.0),
color: Colors.grey,
),
Text(details[index]["value"]),
],
),
Divider(
thickness: 0.5,
color: index == details.length - 1
? Colors.transparent
: Colors.grey,
height: 0.0,
)
],
),
),
),
您可以将 Table 与
一起使用final borderSide = BorderSide(
width: 1,
color: Colors.grey,
);
Table(
border: TableBorder(horizontalInside: borderSide, verticalInside: borderSide),
children: <TableRow>[...],
);
你可以试试这个方法，几乎可以做你想做的事：
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.lightBlue,
body: Container(
child: SingleChildScrollView(
child: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
const SizedBox(height: 20,),
const Padding(
padding: const EdgeInsets.all(20.0),
child: Text(
"PAN Details Verified Successfully!",
style: TextStyle(
fontSize: 18,
fontWeight: FontWeight.w500,
color: Colors.green,
),
),
),
const Padding(
padding: EdgeInsets.only(
top: 0.0, left: 20, right: 20, bottom: 20),
child: Text(
"We have fetched these details from your pan card successfully.",
style: TextStyle(
fontSize: 14,
color: Colors.grey,
),
),
),
Padding(
padding: const EdgeInsets.only(
top: 20.0, left: 20, right: 20, bottom: 20),
child: Column(
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Container(
child: Text("Name:"),
padding: EdgeInsets.all(15),
decoration: BoxDecoration(
border: Border(
right: BorderSide(color: Colors.blue, width: 2)
),
),
width: 130,
height: 50,
),
Text("Chetan Singh"),
],
),
const Divider(height: 0),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Container(
child: Text("PAN Number:"),
padding: EdgeInsets.all(15),
decoration: BoxDecoration(
border: Border(
right: BorderSide(color: Colors.blue, width: 2)
),
),
width: 130,
height: 50,
),
Text("XXXXXX0862"),
],
), const Divider(height: 0),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Container(
child: Text("Email Address:"),
padding: EdgeInsets.all(15),
decoration: BoxDecoration(
border: Border(
right: BorderSide(color: Colors.blue, width: 2)
),
),
width: 130,
height: 50,
),
Text("chitansingh1234@gmail.com"),
],
), const Divider(height: 0),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Container(
child: Text("Phone Number:"),
padding: EdgeInsets.all(15),
decoration: BoxDecoration(
border: Border(
right: BorderSide(color: Colors.blue, width: 2)
),
),
width: 130,
height: 50,
),
Text("XXXXXX1234"),
],
),
],
),
),
Padding(
padding:
const EdgeInsets.only(top: 20.0, bottom: 20, left: 20, right: 20),
child: SizedBox(
height: 45,
width: MediaQuery.of(context).size.width,
child: ElevatedButton(
style: ElevatedButton.styleFrom(
primary: Colors.blue, shadowColor: Colors.transparent),
onPressed: () {
},
child: const Text('Continue to Create MPIN',
style: TextStyle(
fontSize: 16,
)),
),
),
),
],
),
),
),
),
);
}
完整代码如下：
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return const MaterialApp(
debugShowCheckedModeBanner: false,
home: Details(),
);
}
}
class Details extends StatefulWidget {
const Details({Key? key}) : super(key: key);
@override
_DetailsState createState() => _DetailsState();
}
class _DetailsState extends State<Details> {
@override
Widget build(BuildContext context) {
const borderSide = BorderSide(
// define border to table
width: 0.5, // define border to table
color: Colors.grey, // define border to table
); // define border to table
return Scaffold(
backgroundColor: Colors.blue[100],
body: SingleChildScrollView(
child: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
const SizedBox(
height: 20,
),
const Padding(
padding: EdgeInsets.all(20.0),
child: Text(
"PAN Details Verified Successfully!",
style: TextStyle(
fontSize: 32,
fontWeight: FontWeight.w500,
color: Colors.green,
),
),
),
Padding(
padding: const EdgeInsets.only(
top: 0.0, left: 20, right: 20, bottom: 20),
child: Text(
"We have fetched these details from your pan card successfully.",
style: TextStyle(
fontSize: 14,
color: Colors.grey[600],
),
),
),
Padding(
padding: const EdgeInsets.only(
top: 20.0, left: 20, right: 20, bottom: 20),
child: Table(
// use table with padding
columnWidths: const {
// use table columnWidths as you want
0: FlexColumnWidth(3), // use table columnWidths as you want
1: FlexColumnWidth(7), // use table columnWidths as you want
}, // use table columnWidths as you want
border: const TableBorder(
horizontalInside: borderSide,
verticalInside:
borderSide), // use border you defined before
children: <TableRow>[
// add table rows with style
TableRow(children: [
// add table rows with style
const Padding(
// add table rows with style
padding:
EdgeInsets.all(8.0), // add table rows with style
child: Text("Name:"), // add table rows with style
), // add table rows with style
Padding(
// add table rows with style
padding: const EdgeInsets.all(
8.0), // add table rows with style
child: Text(
// add table rows with style
"Chetan Singh", // add table rows with style
style: TextStyle(
color: Colors
.blue[800]), // add table rows with style
), // add table rows with style
), // add table rows with style
]), // add table rows with style
TableRow(children: [
const Padding(
padding: EdgeInsets.all(8.0),
child: Text("PAN Number:"),
),
Padding(
padding: const EdgeInsets.all(8.0),
child: Text(
"XXXXXX0862",
style: TextStyle(color: Colors.blue[800]),
),
),
]),
TableRow(children: [
const Padding(
padding: EdgeInsets.all(8.0),
child: Text("Email Address:"),
),
Padding(
padding: const EdgeInsets.all(8.0),
child: Text(
"chitansingh1234@gmail.com",
style: TextStyle(color: Colors.blue[800]),
),
),
]),
TableRow(children: [
const Padding(
padding: EdgeInsets.all(8.0),
child: Text("Phone Number:"),
),
Padding(
padding: const EdgeInsets.all(8.0),
child: Text(
"XXXXXX1234",
style: TextStyle(color: Colors.blue[800]),
),
),
]),
],
),
),
Padding(
padding: const EdgeInsets.only(
top: 20.0, bottom: 20, left: 20, right: 20),
child: SizedBox(
height: 45,
width: MediaQuery.of(context).size.width,
child: ElevatedButton(
style: ElevatedButton.styleFrom(
primary: Colors.blue, shadowColor: Colors.transparent),
onPressed: () {},
child: const Text('Continue to Create MPIN',
style: TextStyle(
fontSize: 16,
)),
),
),
),
],
),
),
),
);
}
}
和前面代码的结果：