我想在表单中分组一些小部件,但找不到任何小部件。我尝试了分隔符和容器小部件。但是我想要一个像标签设计这样的设计,有谁知道吗?enter image description here这是我正在寻找的设计
okxuctiv1#
我想你要找的是InputDecorator示例:
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'))) ], ), ), ), ), ), ); } }
输出:
1条答案
按热度按时间okxuctiv1#
我想你要找的是
InputDecorator
示例:输出: