英文:

In Flutter is there any widget for grouping other widgets? like in HTML there is <fieldset> tag?

问题

我想在表单中对一些小部件进行分组，但找不到任何方法。

我尝试了分隔符和容器小部件，但我想要像<字段集>标签设计一样的布局，有人知道吗？

输入图像描述 这是我要寻找的设计。

英文:

I want to group some widgets in a form, but I can't find any.

I tried divider and container widgets. but I want a design like &lt;fieldset&gt; tag design, any on know ?

enter image description here this is the design I am looking for

答案1

得分: 1

以下是代码部分的中文翻译：

我认为你正在寻找的是`InputDecorator`。示例：

```dart
import 'package:flutter/material.dart';

void main() => runApp(const App());

class App extends StatelessWidget {
  const App({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Center(
          child: SizedBox(
            height: 350,
            width: 400,
            child: InputDecorator(
              decoration: InputDecoration(
                labelText: '个人信息',
                border: OutlineInputBorder(
                  borderRadius: BorderRadius.circular(10.0),
                ),
              ),
              child: Column(
                children: [
                  const Row(
                    children: [
                      Text('名字：'),
                      SizedBox(
                          width: 200,
                          child: Padding(
                            padding: EdgeInsets.all(8.0),
                            child: TextField(),
                          ))
                    ],
                  ),
                  const Row(
                    children: [
                      Text('姓氏：'),
                      SizedBox(
                          width: 200,
                          child: Padding(
                            padding: EdgeInsets.all(8.0),
                            child: TextField(),
                          ))
                    ],
                  ),
                  const Row(
                    children: [
                      Text('电子邮件：'),
                      SizedBox(
                          width: 200,
                          child: Padding(
                            padding: EdgeInsets.all(8.0),
                            child: TextField(),
                          ))
                    ],
                  ),
                  const Row(
                    children: [
                      Text('生日：'),
                      SizedBox(
                          width: 200,
                          child: Padding(
                            padding: EdgeInsets.all(8.0),
                            child: TextField(
                              decoration:
                                  InputDecoration(hintText: 'dd / mm / yyyy'),
                            ),
                          ))
                    ],
                  ),
                  Align(
                      alignment: Alignment.centerLeft,
                      child: TextButton(
                          onPressed: () {}, child: const Text('提交')))
                ],
              ),
            ),
          ),
        ),
      ),
    );
  }
}

输出：

<details>
<summary>英文:</summary>
I think what you&#39;re looking for is an `InputDecorator`. Example:

import 'package:flutter/material.dart';

void main() => runApp(const App());

class App extends StatelessWidget {
const App({super.key});

@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(
body: Center(
child: SizedBox(
height: 350,
width: 400,
child: InputDecorator(
decoration: InputDecoration(
labelText: 'Personalia',
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(10.0),
),
),
child: Column(
children: [
const Row(
children: [
Text('First name:'),
SizedBox(
width: 200,
child: Padding(
padding: EdgeInsets.all(8.0),
child: TextField(),
))
],
),
const Row(
children: [
Text('Last name:'),
SizedBox(
width: 200,
child: Padding(
padding: EdgeInsets.all(8.0),
child: TextField(),
))
],
),
const Row(
children: [
Text('Email:'),
SizedBox(
width: 200,
child: Padding(
padding: EdgeInsets.all(8.0),
child: TextField(),
))
],
),
const Row(
children: [
Text('Birthday:'),
SizedBox(
width: 200,
child: Padding(
padding: EdgeInsets.all(8.0),
child: TextField(
decoration:
InputDecoration(hintText: 'dd / mm / yyyy'),
),
))
],
),
Align(
alignment: Alignment.centerLeft,
child: TextButton(
onPressed: () {}, child: const Text('Submit')))
],
),
),
),
),
),
);
}
}

Output:
[![enter image description here][1]][1]
[1]: https://i.stack.imgur.com/c3Z5K.png
</details>