Flutter 如何在 ListTile 或 Card 组件中嵌入 TextField 实现目标页面

实现思路 #

• 你当前用ListTile的title和subtitle做左右对齐的布局不够灵活，要嵌入输入框的话直接自定义Card内部的布局即可，不需要强制使用ListTile组件
• TextField嵌入时需要用Expanded包裹，避免水平方向无边界导致的布局报错
• 可以给TextField设置InputDecoration调整边框、背景色、提示文字样式，和深色卡片的视觉风格统一

完整修改代码 #

import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        backgroundColor: const Color(0xff1e2430),
        body: Container(
          child: Column(
            children: <Widget>[
              Container(
                margin: const EdgeInsets.all(20),
                alignment: Alignment.centerLeft,
                child: const Text(
                  "Source Account",
                  style: TextStyle(fontSize: 30, color: Color(0xff8aa1ba)),
                ),
              ),
              // 账户选择卡片
              Container(
                height: 100,
                child: Card(
                  color: const Color(0xff343b4b),
                  clipBehavior: Clip.antiAlias,
                  elevation: 10,
                  margin: const EdgeInsets.all(7),
                  child: Padding(
                    padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12),
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      children: [
                        Column(
                          crossAxisAlignment: CrossAxisAlignment.start,
                          mainAxisSize: MainAxisSize.min,
                          children: const [
                            Text(
                              "Main Account 123456",
                              style: TextStyle(
                                color: Colors.white,
                                fontSize: 15,
                                fontWeight: FontWeight.bold
                              ),
                            ),
                            SizedBox(height: 8),
                            Text(
                              "Available Balance",
                              style: TextStyle(
                                color: Colors.white70,
                                fontSize: 13,
                              ),
                            ),
                          ],
                        ),
                        const Text(
                          "10,000.9 KWD",
                          style: TextStyle(
                            color: Colors.white,
                            fontSize: 16,
                            fontWeight: FontWeight.bold
                          ),
                        ),
                      ],
                    ),
                  ),
                ),
              ),
              const SizedBox(height: 20),
              // 带输入框的金额卡片
              Container(
                height: 120,
                child: Card(
                  color: const Color(0xff343b4b),
                  clipBehavior: Clip.antiAlias,
                  elevation: 10,
                  margin: const EdgeInsets.all(7),
                  child: Padding(
                    padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12),
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      mainAxisSize: MainAxisSize.min,
                      children: [
                        const Text(
                          "Transfer Amount",
                          style: TextStyle(
                            color: Colors.white70,
                            fontSize: 14,
                          ),
                        ),
                        const SizedBox(height: 8),
                        Row(
                          crossAxisAlignment: CrossAxisAlignment.center,
                          children: [
                            const Text(
                              "KWD",
                              style: TextStyle(
                                color: Colors.white,
                                fontSize: 18,
                                fontWeight: FontWeight.bold
                              ),
                            ),
                            const SizedBox(width: 16),
                            Expanded(
                              child: TextField(
                                style: const TextStyle(
                                  color: Colors.white,
                                  fontSize: 24,
                                  fontWeight: FontWeight.bold
                                ),
                                keyboardType: const TextInputType.numberWithOptions(decimal: true),
                                decoration: const InputDecoration(
                                  hintText: "0.00",
                                  hintStyle: TextStyle(color: Colors.white38),
                                  border: InputBorder.none,
                                  contentPadding: EdgeInsets.zero,
                                ),
                              ),
                            )
                          ],
                        )
                      ],
                    ),
                  ),
                ),
              )
            ],
          ),
        ),
      ),
    );
  }
}

内容的提问来源于stack exchange，提问作者iKaka