Question

“我是一位初学者，我想在行中显示两个文本。其中“ hello”是第一个文本小部件，“ world”是另一个文本小部件

我尝试着用我的基本知识做到这一点，但是遇到了这些错误

具有多个子级的水平RenderFlex具有null的textDirection，因此未定义布局顺序。 'package：flutter / src / rendering / flex.dart'：断言失败：439行pos 18：'textDirection！= null'

    class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Row(
      children: <Widget>[
        Text("hello",textDirection: TextDirection.rtl,),
        Text("world",textDirection: TextDirection.rtl,)
      ],
    );
  }
}

Answer 1

请尝试以下代码：-

@override
  Widget build(BuildContext context) {
    return Row(
      crossAxisAlignment: CrossAxisAlignment.center,
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        Text("Hello",style: TextStyle(color: Colors.blue)),
        Text("World",style: TextStyle(color: Colors.blue))
      ],
    );
}

Answer 2

**Try This Simplest Way**

import 'package:flutter/material.dart';
class Example extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        body: Row(
          children: <Widget>[
        Text("Hello"),
        Text("World"),
          ],
        ),
      ),
    );
  }
}

Answer 3

请阅读以下有关Flutter中行的链接：

https://medium.com/jlouage/flutter-row-column-cheat-sheet-78c38d242041

简而言之，您声明一行，并且该行内的项目是子项（必须是小部件）。

我从这里选了一个例子 https://flutter.dev/docs/development/ui/layout

类似的东西

Row(
  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
  children: [
    Image.asset('images/pic1.jpg'),
    Image.asset('images/pic2.jpg'),
    Image.asset('images/pic3.jpg'),
  ],
);

以您为例，您只需删除image.asset并将其更改为文本...

Row(
  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
  children: [
    Text('Hello'),
    Text('World'),

  ],
);

或您想要的任何内容。

Answer 4

也许您想改用RichText？

import React, {Component} from 'react';
import axios from 'axios';
import Answer from './Answer';


export default class CreateQuiz extends Component {

    constructor(props) {
        super(props);

        this.onChangeQuestion = this.onChangeQuestion.bind(this);
        this.onChangeQuestionTitle = this.onChangeQuestionTitle.bind(this);
        this.onChangeAnswerOptions = this.onChangeAnswerOptions.bind(this);
        this.onAddItem = this.onAddItem.bind(this);
        this.handleInputChange = this.handleInputChange.bind(this);
        this.onChangeQuestionAutor = this.onChangeQuestionAutor.bind(this);
        this.onChangeValue = this.onChangeValue.bind(this);
        this.onChangeAnswerValidity = this.onChangeAnswerValidity.bind(this);
        this.onSubmit = this.onSubmit.bind(this);
    //   this.GenerateAnswers = this.GenerateAnswers.bind(this);


        this.state = {
            questionTitle: '',
            questionAutor: '',
            question: '',
            answers : [],
            answerOptions: [],

        }
    }
    onChangeValue = event => {
    this.setState({ currentAnswerValue: event.target.value });
    };

    onAddItem = () => {
    // not allowed AND not working
    this.setState(state => {
        const newAnswer = {
            answerText : '',
            answerValidity : false
        };
        const list = this.state.answerOptions.push(newAnswer);
        return {
        list,
        };
    });
    };

    handleInputChange(event) {

        const newIds = this.state.answerOptions.slice() //copy the array
        const index = this.state.answerOptions.findIndex((el) => (el.id === event.params.id))
        newIds[index].answerText = event.target.value //execute the manipulations
        this.setState({answerOptions: newIds}) //set the new state
      }
      onChangeAnswerValidity(event){
        const newIds = this.state.answerOptions.slice() //copy the array
        const index = this.state.answerOptions.findIndex((el) => el.answerText === event.target.value)
        newIds[index].answerValidity = event.target.value //execute the manipulations
        this.setState({answerOptions: newIds}) //set the new state
      }

    onChangeQuestionAutor(e){
        this.setState({
            questionAutor: e.target.value
        });
    }

    onChangeQuestionTitle(e) {
        this.setState({
            questionTitle: e.target.value
        });
    }

    onChangeQuestion(e) {
        this.setState({
            question: e.target.value
        });
    }

    onChangeAnswerOptions(e) {
        this.setState({
            answerOptions: e.target.value
        });
    }




    onSubmit(e) {
        e.preventDefault();

        console.log(`Form submitted:`);
        console.log(`questionTitle: ${this.state.questionTitle}`);
        console.log(`questionAutor: ${this.state.questionAutor}`);
        console.log(`question: ${this.state.question}`);
     //   this.GenerateAnswers();
        console.log(`answerOptions: ${this.state.answers}`);

        const newQuiz = {
            questionTitle: this.state.questionTitle,
            questionAutor: this.state.questionAutor,
            question: this.state.question,
            answerOptions: this.state.answers,
        }

        axios.post('http://localhost:4000/quizzes/add', newQuiz)
            .then(res => console.log(res.data));


        this.setState({
            questionTitle: '',
            questionAutor: '',
            question: '',
            answers : [],
            answerOptions: []

        })        

    }

    answerList(){
        return this.state.answerOptions.map(function(currentAnswer, index) {           
            return <Answer answer = {currentAnswer} key = {index}/>;
        });

    }

    // GenerateAnswers(){
    //     const newAnswers = this.state.answers
    //     this.state.answerOptions.map(function(currentAnswer, index){
    //         const newAnswer = this.state.answerOptions[index].getCurrentState()
    //         newAnswers.push(newAnswer)
    //     });
    //     this.setState({answers: newAnswers});
    // }

    render() {
        return (
            <div style={{marginTop: 20}}>
                <h3>Create new question</h3>
                <form onSubmit={this.onSubmit}>
                    <div className="form-group">
                        <label>Question Title: </label>
                        <input  type="text"
                                className="form-control"
                                value={this.state.questionTitle}
                                onChange={this.onChangeQuestionTitle}
                                />
                    </div>
                    <div className="form-group">
                        <label>Question Autor: </label>
                        <input  type="text"
                                className="form-control"
                                value={this.state.questionAutor}
                                onChange={this.onChangeQuestionAutor}
                                />
                    </div>
                    <div className="form-group">
                        <label>Question: </label>
                        <input  type="text"
                                className="form-control"
                                value={this.state.question}
                                onChange={this.onChangeQuestion}
                                />
                    </div>
                    <div>
                        <ul>
                        {this.answerList()}
                        </ul>
                    </div>
                    <div  className="form-group">
                        <button type="button" onClick = {this.onAddItem} className="btn btn-primary"> Add answer </button> 
                    </div>

                    <div className="form-group">
                        <input type="submit" value="submit Question" className="btn btn-primary" />
                    </div>
                </form>
            </div>
        )
    }
}

“如何在一行小部件中创建两个文本小部件”

4 个答案: