在Flutter中是否有用于分组其他小部件的小部件?就像HTML中有< fieldset>标签一样?

mftmpeh8  于 2023-06-07  发布在  Flutter
关注(0)|答案(1)|浏览(121)

我想在表单中分组一些小部件,但找不到任何小部件。
我尝试了分隔符和容器小部件。但是我想要一个像标签设计这样的设计,有谁知道吗?
enter image description here这是我正在寻找的设计

okxuctiv

okxuctiv1#

我想你要找的是InputDecorator示例:

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')))
                ],
              ),
            ),
          ),
        ),
      ),
    );
  }
}

输出:

相关问题