flutter - 在 Flutter 中完成一行后，我应该如何使文本框连续而不是换行？

Question

我是新来的，我想放置一个文本框，它只在达到屏幕尺寸限制后继续接收文本而不创建新行，就像我希望它在达到屏幕尺寸限制时可以在水平方向滚动一样，那么该怎么做呢？这是仅文本框部分的代码

Expanded(
  flex: 1,
  child: Container(
    child: Padding(
      padding: EdgeInsets.fromLTRB(0, 0, 12, 25),
      child: Text(
        _input,
        style: GoogleFonts.titilliumWeb(
          fontSize: 50.0,
          color: Colors.grey[800],
        ),
      ),
    ),
    alignment: Alignment(1.0, 1.0),
  ),
)

标签： flutterdart

Answer 1

这是 aText和 a的解决方案TextField：

可滚动Text

为了实现这一点，请将您的可滚动内容（这里是您的容器）放在SingleChildScrollView.

SingleChildScrollView(
  scrollDirection: Axis.horizontal,
  child: Container(
    color: Colors.amber.shade300,
    padding: EdgeInsets.all(16.0),
    child: Text(
      'Fear is the path to the dark side. Fear leads to anger. Anger leads to hate. Hate leads to suffering.',
      style: GoogleFonts.titilliumWeb(
        fontSize: 24.0,
        color: Colors.grey[800],
      ),
    ),
  ),
)

可滚动TextField

在这里，我曾经IntrinsicWidth使文本以其前缀图标居中，然后可滚动。

Container(
  height: 48.0,
  padding: EdgeInsets.symmetric(horizontal: 16.0, vertical: 0.0),
  margin: EdgeInsets.all(8.0),
  decoration: BoxDecoration(
    color: Colors.amber.shade300,
    border: Border.all(
      color: Colors.brown,
      width: 3.0,
    ),
    borderRadius: BorderRadius.circular(25),
  ),
  child: Center(
    child: IntrinsicWidth(
      child: TextField(
        textAlignVertical: TextAlignVertical.center,
        decoration: InputDecoration(
          prefixIcon: Icon(Icons.search),
          hintText: 'Search',
          border: InputBorder.none,
        ),
      ),
    ),
  ),
)

---

完整的源代码，便于复制粘贴

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

void main() {
  runApp(
    MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Demo',
      home: HomePage(),
    ),
  );
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: SingleChildScrollView(
          scrollDirection: Axis.horizontal,
          child: Container(
            color: Colors.amber.shade300,
            padding: EdgeInsets.all(16.0),
            child: Text(
              'Fear is the path to the dark side. Fear leads to anger. Anger leads to hate. Hate leads to suffering.',
              style: GoogleFonts.titilliumWeb(
                fontSize: 24.0,
                color: Colors.grey[800],
              ),
            ),
          ),
        ),
      ),
    );
  }
}